Modal is hiding automatically after showing another modal in vuejs.

Question

I am using import bModal from 'bootstrap-vue/es/components/modal/modal'; bootstrap-modal

I have following User Interface in Modal, here I need to choose department from a dropdown(getting item list using AJAX). Here I want to make it easy to add new department by clicking button beside the dropdonw - for such popup modal with UI.

In vuejs i have code for main modal -

showModal () {
  this.clearForm();
  this.formInfo.formSubmitted = false;
  this.$refs[this.modalInfo.id].show();
}

this is working fine. Now on click event on green button, another modal should be opened over currently opened window. Unfortunately, currently modal is get hidden and new model opened. I have following code for extra modal-

showExtraModal:function(){
    this.$refs['extraModal'].show();
}

How can I solve this problem in vue js.

dr_barto · Accepted Answer · 2018-04-07 09:41:49Z

1

Seems to be a limitation of Bootstrap (see docs):

Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.

Since bootstrap-vue is just a wrapper around Bootstrap, the same limitation will likely apply.

I had a similar problem with pure Bootstrap; IIRC I solved it by altering the content of the modal instead of showing a new one (in Vue-speak: rendering a different component), kind of a mini-routing inside the modal.

answered Apr 7, 2018 at 9:41

dr_barto

6,2225 gold badges31 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Veshraj Joshi Over a year ago

Hmm.. Yep, I also think of alternation but it seems like irritable UX and went for popovers. Thanks... for your reply. If you found my question is valuable please upvote it.

Collectives™ on Stack Overflow

Modal is hiding automatically after showing another modal in vuejs.

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related