[Vuejs]-Vue close modal from a button

by

2👍

✅

You can use the built-in this.$bvModal.hide(id) provided by bootstrap-vue.

So instead of…

<b-button variant="info" data-dismiss="modal-scrollable" v-on:click="closeModal">CLOSE USING THIS BUTTON</b-button>

do this instead…

<b-button variant="info" @click="$bvModal.hide('modal-scrollable')">CLOSE USING THIS BUTTON</b-button>

This way, you don’t need the extra close modal method.

Edit

Actually you don’t need the entire method block.
You can as well take out the data items.

Your code should work fine with just this…

<div id="app">
  <b-button v-b-modal.modal-scrollable variant="info" >Open this Modal</b-button>

  <b-modal id="modal-scrollable" scrollable title="Waiver Legal" v-show="!displayModal">
    <p class="my-4">
      "Contains modal detail"
    </p>

      <b-button variant="info" @click="$bvModal.hide('modal-scrollable')">CLOSE USING THIS BUTTON</b-button>
      <br>

    </b-modal>
</div>

Script…

new Vue({
  el: "#app"
})

Isn’t that a lot cleaner? ;D

👤Lyndon

1👍

Insted I have used another solution the v-model property for the b-modal for showing and hide the modal.

<div id="app">
  <b-button @click="openModal()" variant="info" >Open this Modal</b-button>

  <b-modal id="modal-scrollable" scrollable title="Waiver Legal" v-modal="popUp">
    <p class="my-4">
      "Contains modal detail"
    </p>

      <b-button variant="info" @click="closeModal()">CLOSE USING THIS BUTTON</b-button>
      <br>

    </b-modal>
</div>

…And inside script create methods

openModal(){
  this.popUp = true;
}

closeModal(){
  this.popUp = false;
}
👤Kunal Chikte

0👍

Here I’m giving a solution in plain javascript. I used Vue js and I don’t want to use jQuery along with Vue.

document.querySelector('#modalid').classList.remove('show');
document.querySelector('body').classList.remove('modal-open');
const mdbackdrop = document.querySelector('.modal-backdrop');
if (mdbackdrop){
   mdbackdrop.classList.remove('modal-backdrop', 'show');
 }
👤Md. Morshadun Nur

Leave a comment