Created
May 15, 2019 20:03
-
-
Save artlili/9affbc0388560949f9f4cb2fc7983cc4 to your computer and use it in GitHub Desktop.
Modal window
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.modal-mask { | |
position: fixed; | |
z-index: 9998; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background-color: rgba(0, 0, 0, .5); | |
display: table; | |
transition: opacity .3s ease; | |
} | |
.modal-wrapper { | |
display: table-cell; | |
vertical-align: middle; | |
} | |
.modal-container { | |
width: 300px; | |
margin: 0px auto; | |
padding: 20px 30px; | |
background-color: #fff; | |
border-radius: 2px; | |
box-shadow: 0 2px 8px rgba(0, 0, 0, .33); | |
transition: all .3s ease; | |
font-family: Helvetica, Arial, sans-serif; | |
} | |
.modal-header h3 { | |
margin-top: 0; | |
color: #42b983; | |
} | |
.modal-body { | |
margin: 20px 0; | |
} | |
.modal-default-button { | |
float: right; | |
} | |
/* | |
* The following styles are auto-applied to elements with | |
* transition="modal" when their visibility is toggled | |
* by Vue.js. | |
* | |
* You can easily play with the modal transition by editing | |
* these styles. | |
*/ | |
.modal-enter { | |
opacity: 0; | |
} | |
.modal-leave-active { | |
opacity: 0; | |
} | |
.modal-enter .modal-container, | |
.modal-leave-active .modal-container { | |
-webkit-transform: scale(1.1); | |
transform: scale(1.1); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script type="text/x-template" id="modal-template"> | |
<transition name="modal"> | |
<div class="modal-mask"> | |
<div class="modal-wrapper"> | |
<div class="modal-container"> | |
<div class="modal-header"> | |
<slot name="header"> | |
default header | |
</slot> | |
</div> | |
<div class="modal-body"> | |
<slot name="body"> | |
default body | |
</slot> | |
</div> | |
<div class="modal-footer"> | |
<slot name="footer"> | |
default footer | |
<button class="modal-default-button" @click="$emit('close')"> | |
OK | |
</button> | |
</slot> | |
</div> | |
</div> | |
</div> | |
</div> | |
</transition> | |
</script> | |
<!-- app --> | |
<div id="app"> | |
<button id="show-modal" @click="showModal = true">Show Modal</button> | |
<!-- use the modal component, pass in the prop --> | |
<modal v-if="showModal" @close="showModal = false"> | |
<!-- | |
you can use custom content here to overwrite | |
default content | |
--> | |
<h3 slot="header">custom header</h3> | |
</modal> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// register modal component | |
Vue.component('modal', { | |
template: '#modal-template' | |
}) | |
// start app | |
new Vue({ | |
el: '#app', | |
data: { | |
showModal: false | |
} | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment