CODEWITHSUNDEEP
vue.jsbootstrap-vue
Elefanto Company
Elefanto Company

Reputation: 21

How to add backdrop / esc/ headerclose triggers on bootstrap-vue modal?

In my project I am using the bootstrap-vue modal. Now I need to add validation for when a user closes the modal. There should be a confirmation question, "Are you sure you want to close without saving?"

The ok and cancel button triggers work well, but when I tried the same with the esc key and clicking on the backdrop, but neither of them work. I see in the docs that I can use them https://bootstrap-vue.js.org/docs/components/modal/

HTML:

<div id="app">
  <b-btn v-b-modal.modal1>Launch demo modal</b-btn>
  <b-modal id="modal1" title="Bootstrap-Vue" @headerclose="confirmBeforeHide"
    @esc="confirmBeforeHide">
    <p class="my-4">QQ</p>
  </b-modal>
</div>

JS:

new Vue({
  el: '#app',
  methods: {
    confirmBeforeHide(e) {
        alert('hi')
    }
  },
})

CSS:

#app {
  padding: 20px;
  height: 450px;
}

Here is my jsfiddle

Upvotes: 0

Views: 312

Answers (1)

Elefanto Company
Elefanto Company

Reputation: 21

There is @hide to place of esc/headerclose/backdrop

Upvotes: 1

Related Questions