KevinMidboe/vue-js-modal
1
0
Fork 0
mirror of https://github.com/KevinMidboe/vue-js-modal.git synced 2025-10-29 09:50:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #174 from JaZo/issue-162

Browse Source 
Added extra wrapper div to listen to background click events
This commit is contained in:
Yev Vlasenko
2018-03-13 16:57:35 +00:00
committed by GitHub
parent 14de8fe26f fbd9b0b9f7
commit 765bfdea6d
1 changed files with 33 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/Modal.vue
View File

@@ -4,26 +4,28 @@
ref="overlay"
:class="overlayClass"
:aria-expanded="visible.toString()"
:data-modal="name"
@mousedown.stop="onBackgroundClick"
@touchstart.stop="onBackgroundClick">
<div class="v--modal-top-right">
<slot name="top-right"/>
</div>
<transition :name="transition">
<div v-if="visibility.modal"
ref="modal"
:class="modalClass"
:style="modalStyle"
@mousedown.stop
@touchstart.stop>
<slot/>
<resizer v-if="resizable && !isAutoHeight"
:min-width="minWidth"
:min-height="minHeight"
@resize="onModalResize"/>
:data-modal="name">
<div :class="backgroundClickClass"
@mousedown.stop="onBackgroundClick"
@touchstart.stop="onBackgroundClick">
<div class="v--modal-top-right">
<slot name="top-right"/>
</div>
</transition>
<transition :name="transition">
<div v-if="visibility.modal"
ref="modal"
:class="modalClass"
:style="modalStyle"
@mousedown.stop
@touchstart.stop>
<slot/>
<resizer v-if="resizable && !isAutoHeight"
:min-width="minWidth"
:min-height="minHeight"
@resize="onModalResize"/>
</div>
</transition>
</div>
</div>
</transition>
</template>
@@ -359,6 +361,12 @@ export default {
scrollable: this.scrollable && this.isAutoHeight
}
},
/**
* Returns class list for click outside overlay (background click)
*/
backgroundClickClass() {
return ['v--modal-background-click']
},
/**
* Returns class list for modal itself
*/
@@ -656,10 +664,15 @@ export default {
height: 100%;
min-height: 100vh;
overflow-y: auto;
padding-bottom: 10px;
-webkit-overflow-scrolling: touch;
}
.v--modal-overlay .v--modal-background-click {
min-height: 100%;
width: 100%;
padding-bottom: 10px;
}
.v--modal-overlay .v--modal-box {
position: relative;
overflow: hidden;