How to toggle modal windows in bootstrap?

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.

Answers 1

  • This should work:

    $('.modal').on('', function(e) {
     $('.modal').on('', 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.

Related Articles