vue-bmodal demo

Demo for my simple vue modal

by beitomartinez

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-bmodal/dist/vueBmodal.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-bmodal/dist/vueBmodal.css">

<style>
  body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
  .cursor-pointer { cursor: pointer;}
  .modal-header, .modal-body, .modal-footer { padding: 8px }
  .modal-header { background-color: #222; color: #fff; font-size:16px; }
</style>

<div id="app">
  <div class="cursor-pointer" @click="myAwesomeModal = true">Show me the modal!</div>
  <vue-bmodal
    @closeme="myAwesomeModal = false"
    v-if="myAwesomeModal == true"
    bwidth="small">
    <div slot="header" class="modal-header">Some awesome modal header</div>
    <div slot="body" class="modal-body">Some fine body for your modal</div>
    <div slot="footer" class="modal-footer">And the footer. <span class="cursor-pointer" @click="myAwesomeModal = false"><strong>Click here to close the modal</strong></span></div>
  </vue-bmodal>
</div>

JavaScript

new Vue({
  data (){
    return {
      myAwesomeModal: false
    }
  },
  components: {
    'vue-bmodal': vueBmodal
  }
}).$mount('#app')