CODEWITHSUNDEEP
javascriptvue.js
T dhanunjay
T dhanunjay

Reputation: 820

BootstrapVue: How to close popup/form onclick of button

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

Upvotes: 2

Views: 1143

Answers (2)

Hiws
Hiws

Reputation: 10334

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/[email protected]/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>


<div id="app" class="p-3">
  <b-button v-b-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>

Upvotes: 0

Majed Badawi
Majed Badawi

Reputation: 28414

  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" 
      v-b-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>

Upvotes: 1

Related Questions