javascript - 如何在 Bootstrap 中切换模式窗口？

Question

我有两个按钮可以触发不同的模态窗口，但是当我单击其中一个按钮(并触发其相应的模态窗口)时，我无法做到，如果打开了其他模态窗口，则关闭另一个。简单如下:如果我打开一个模式，而另一个模式也打开，则关闭当前打开的模式并打开新的模式。我正在使用 Bootstrap 模式。

这会触发一个模态窗口

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

这会触发另一个

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

感谢您的帮助!

<小时/>

这是工作站点，检查放大镜玻璃图标和汉堡包图标在打开相应模态窗口时的行为。

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

Answer 1

这应该有效:

$('.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');

 });

代码已更新，因此根据您的网站，也会考虑按钮状态。