How to toggle modal windows in bootstrap?

Question

I have two buttons that triggers different modal windows, but I can't get to make when I click in one of the buttons (and trigger its corresponding modal window), if the other modal windows is opened, close the other. Simple as: if I open a modal and the other modal is opened, close the currently opened one and open the new. I'm using bootstrap modals.

This triggers one modal window

<button class="magicon" data-toggle="modal" 
         data-target="#modalsearch" data-backdrop="false"></button>
<div id="modalsearch" class="modal fade" tabindex="-1" 
         role="dialog" aria-labelledby="labelmodalsearch" aria-hidden="true"></div>

And this triggers the other

<button class="navicon" data-toggle="modal" 
         data-target="#modalmenu" data-backdrop="false"></button>
<div id="modalmenu" class="modal fade" tabindex="-1" 
         role="dialog" aria-labelledby="labelmodalmenu" aria-hidden="true"></div>

thanks for your help!

this is the working site, check how the magnifier glass icon and the hamburger icon behaves when opening their corresponding modal windows.

http://www.byalexander.com.au/rotary-youth-art-project-cc-x-ccp-2017-2/

How can you click on button Without closing the First Open Modal.??Or the First modal contains the button to open the next Modal.. — too_cool
hey @Dwhitz, this is the working site, check the magnifier glass icon and the hamburger icon byalexander.com.au/rotary-youth-art-project-cc-x-ccp-2017 — Juan Pablo Contreras
hey @too_cool, this is the working site, check the magnifier glass icon and the hamburger icon byalexander.com.au/rotary-youth-art-project-cc-x-ccp-2017 — Juan Pablo Contreras
Do you use any JavaScript. If not, I would recommend it as you can then manage the behaviours of each modal. Close the other one (even if it is not open) before opening the next. — Peter Smith

Levon Grigoryan Levon Grigoryan · Accepted Answer · 2017-10-31T07:47:40

This should work:

$('.modal').on('show.bs.modal', function(e) {

    $('.modal').not(this).modal('hide');

 });
 $('.modal').on('hide.bs.modal', function(e) {

   var $btnRelated = $(e.relatedTarget);
    $btnRelated.hasClass('open') && $btnRelated.removeClass('open');

 });

Code was updated, so the button states are also considered, as per your site.

How to toggle modal windows in bootstrap?

1 Answers