Created
November 15, 2016 12:57
-
-
Save oguzhanaslan/45180a0c75251fceba62a276b4009740 to your computer and use it in GitHub Desktop.
ahmetsulek panda
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>hello-vue</title> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <button @click="$refs.modal.open()">Open Modal</button> | |
| <modal ref="modal"></modal> | |
| </div> | |
| <script src="/dist/build.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| import Vue from 'vue' | |
| import Modal from './Modal.vue' | |
| var app = new Vue({ | |
| el: '#app', | |
| components: { | |
| 'modal' : Modal | |
| }, | |
| methods: { | |
| openModal : function() { | |
| this.$refs.modal.open(); | |
| }, | |
| }, | |
| }) |
This file contains hidden or 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
| <template> | |
| <div id="modal" v-if="show"> | |
| <div class="modal-mask" @click="close" transition="modal"> | |
| <div class="modal-container" @click.stop> | |
| CONTENT | |
| </div> | |
| </div> | |
| </div> | |
| </template> | |
| <script> | |
| export default { | |
| name: 'modal', | |
| methods: { | |
| open: function(){ | |
| this.show = true; | |
| }, | |
| close: function(){ | |
| this.show = false; | |
| } | |
| }, | |
| data: function(){ | |
| return { | |
| show : false | |
| } | |
| }, | |
| ready: function(){ | |
| document.addEventListener("keydown", (e) => { | |
| if (this.show && e.keyCode == 27) { | |
| this.close(); | |
| } | |
| }); | |
| } | |
| } | |
| </script> | |
| <style> | |
| .modal-mask{ | |
| z-index: 10000; | |
| position: fixed; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0,0,0,0.4); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .modal-container{ | |
| width: 100%; | |
| max-width: 50%; | |
| min-width: 400px; | |
| height: 300px; | |
| background: #fff; | |
| border-radius: 4px; | |
| box-shadow: 0 0 30px rgba(0, 4px, 0, 0.2); | |
| } | |
| </style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment