BootstrapVue：如何关闭按钮的弹出窗口/表单 onclick

Question

<b-button class="button-self" v-on:click="resetNow"  v-b-modal.modal-1>Register</b-button>
 
<b-modal id="modal-1" title="" class="modal-dialog modal-lg fade main-pop">
  <div class="modal-content">
    <div class="right-source" v-if="isRegisterFourth">
      <div class="proceed-section">
        <div class="icon-err"/>
          <div class="get_back-img"></div>
          <div>
            <button type="button" class="btn btn-secondary goto-home-err" @click="isRegisterFourth = !showForm">
              <b>OK</b>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</b-modal>

Onclick of button, how to close popup.

Answer 1

1. Set a ref on the b-modal element
2. On the "OK" button click, call a function hideModal
3. In the last, use this.$refs.modal1.hide(); to close the modal

 new Vue({ el:"#app", data: () => ({ isRegisterFourth: true }), methods: { hideModal() { this.$refs.modal1.hide(); }, resetNow() {} } });

 <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script> <script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script> <div id="app"> <div> <b-button class="button-self" v-on:click="resetNow" vb-modal.modal-1 >Register</b-button> <b-modal ref="modal1" id="modal-1" title="" class="modal-dialog modal-lg fade main-pop"> <div class="modal-content"> <div class="right-source" v-if="isRegisterFourth"> <div class="proceed-section"> <div class="icon-err"/><div class="get_back-img"></div> <div> <button type="button" class="btn btn-secondary goto-home-err" @click="hideModal" ><b>OK!</b></button> </div> </div> </div> </div> </b-modal> </div> </div>

Answer 2

The default slot in <b-modal> exposes a hide method, which you can call to hide the modal. There's also various other methods in the scope you can use depending on your needs. You can see which ones on the docs

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

 <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.css" /> <script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script> <div id="app" class="p-3"> <b-button vb-modal.modal-1>Register</b-button> <b-modal id="modal-1"> <template #default="{ hide }"> <b-button @click="hide"> Close Modal </b-button> </template> </b-modal> </div>