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.

回答1:

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

回答2:

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.

回答3:

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