1
[Vue.js] Modal (Popup)
source link: http://siongui.github.io/2017/05/11/vuejs-modal-popup/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
[Vue.js] Modal (Popup)
Modal (Popup) implementation via Vue.js and CSS. According to w3schools, modal is dialog box/popup window that is displayed on top of the current page. The modal here is similar to Bootstrap modal.
The following is the source code for above demo.
HTML:
<div id="vueapp">
<!-- Button trigger modal -->
<button type="button" v-on:click="isShowMyModal = true">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal" v-show="isShowMyModal">
<h4>Modal Title</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis
felis, tempus sit amet sollicitudin quis, aliquet ut felis.
Nam a malesuada sem.
</p>
<button type="button" v-on:click="isShowMyModal = false">Close</button>
</div>
</div>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK