Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Open bootstrap modal with vue.js 2.0

Does anyone know how to open a bootstrap modal with vue 2.0? Before vue.js I would simply open the modal by using jQuery: $('#myModal').modal('show');

However, is there a proper way I should do this in Vue?

Thank you.

like image 224
Trung Tran Avatar asked Mar 19 '17 18:03

Trung Tran


People also ask

Can you use Vue JS with Bootstrap?

With BootstrapVue you can build responsive, mobile-first, and ARIA accessible projects on the web using Vue. js and the world's most popular front-end CSS library — Bootstrap v4.


4 Answers

My code is based on the Michael Tranchida's answer.

Bootstrap 3 html:

<div id="app">   <div v-if="showModal">     <transition name="modal">       <div class="modal-mask">         <div class="modal-wrapper">           <div class="modal-dialog">             <div class="modal-content">               <div class="modal-header">                 <button type="button" class="close" @click="showModal=false">                   <span aria-hidden="true">&times;</span>                 </button>                 <h4 class="modal-title">Modal title</h4>               </div>               <div class="modal-body">                 modal body               </div>             </div>           </div>         </div>       </div>     </transition>   </div>   <button id="show-modal" @click="showModal = true">Show Modal</button> </div> 

Bootstrap 4 html:

<div id="app">   <div v-if="showModal">     <transition name="modal">       <div class="modal-mask">         <div class="modal-wrapper">           <div class="modal-dialog" role="document">             <div class="modal-content">               <div class="modal-header">                 <h5 class="modal-title">Modal title</h5>                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">                   <span aria-hidden="true" @click="showModal = false">&times;</span>                 </button>               </div>               <div class="modal-body">                 <p>Modal body text goes here.</p>               </div>               <div class="modal-footer">                 <button type="button" class="btn btn-secondary" @click="showModal = false">Close</button>                 <button type="button" class="btn btn-primary">Save changes</button>               </div>             </div>           </div>         </div>       </div>     </transition>   </div>   <button @click="showModal = true">Click</button> </div>  

js:

new Vue({   el: '#app',   data: {     showModal: false   } }) 

css:

.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; } 

And in jsfiddle

like image 169
MikeS Avatar answered Sep 20 '22 14:09

MikeS


Tried to write a code that using VueJS transitions to operate native Bootsrap animations.

HTML:

    <div id="exampleModal">       <!-- Button trigger modal-->       <button class="btn btn-primary m-5" type="button" @click="showModal = !showModal">Launch demo modal</button>       <!-- Modal-->       <transition @enter="startTransitionModal" @after-enter="endTransitionModal" @before-leave="endTransitionModal" @after-leave="startTransitionModal">         <div class="modal fade" v-if="showModal" ref="modal">           <div class="modal-dialog" role="document">             <div class="modal-content">               <div class="modal-header">                 <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>                 <button class="close" type="button" @click="showModal = !showModal"><span aria-hidden="true">×</span></button>               </div>               <div class="modal-body">...</div>               <div class="modal-footer">                 <button class="btn btn-secondary" @click="showModal = !showModal">Close</button>                 <button class="btn btn-primary" type="button">Save changes</button>               </div>             </div>           </div>         </div>       </transition>       <div class="modal-backdrop fade d-none" ref="backdrop"></div>     </div> 

Vue.JS:

    var vm = new Vue({       el: "#exampleModal",       data: {         showModal: false,       },       methods: {         startTransitionModal() {           vm.$refs.backdrop.classList.toggle("d-block");           vm.$refs.modal.classList.toggle("d-block");         },         endTransitionModal() {           vm.$refs.backdrop.classList.toggle("show");           vm.$refs.modal.classList.toggle("show");         }       }     }); 

Example on Codepen if you are not familiar with Pug click View compiled HTML on a dropdown window in HTML section.

This is the basic example of how Modals works in Bootstrap. I'll appreciate if anyone will adopt it for general purposes.

Have a great code 🦀!

like image 41
Andrey Horsev Avatar answered Sep 22 '22 14:09

Andrey Horsev


I did an amalgam of the Vue.js Modal example and the Bootstrap 3.* live demo.

Basically, I used the Vue.js modal example but replaced (sorta) the Vue.js "html" part with the bootstrap modal html markup, save one thing (I think). I had to strip the outer div from the bootstrap 3, then it just worked, voila!

So the relevant code is regarding bootstrap. Just strip the outer div from the bootstrap markup and it should work. So...

ugh, a site for developers and i can't easily paste in code? This has been a serious continuing problem for me. Am i the only one? Based on history, I'm prolly an idiot and there's an easy way to paste in code, please advise. Every time i try, it's a horrible hack of formatting, at best. i'll provide a sample jsfiddle of how i did it if requested.

like image 22
MikeT Avatar answered Sep 22 '22 14:09

MikeT


Using the $nextTick() function worked for me. It just waits until Vue has updated the DOM and then shows the modal:

HTML

<div v-if="is_modal_visible" id="modal" class="modal fade">...</div>

JS

{
  data: {
    isModalVisible: false,
  },
  methods: {
    showModal() {
      this.isModalVisible = true;
      this.$nextTick(() => {
        $('#modal').modal('show');
      });
    }
  },
}
like image 30
Philippe Gerber Avatar answered Sep 21 '22 14:09

Philippe Gerber