Question

我有一个包含两个模态的页面。问题是，当第一个模态已经打开然后我打开第二个模式时，第一个模态不会自动隐藏。

这是我的HTML：

<!-- Sign Up Modal -->
<div class="modal fade" id="SignUpModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
    <div class="modal-content">
          <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title"> قم بالاشتراك الان بكل سهولة و تتمتع بتجربة لا مثيلا لها</h4>
      </div>
          <div class="modal-body"> 

        <div class="row ">
             <div class="col-xs-3 "></div>
              <div class="col-xs-3 " style="text-align:center; "><img src="img/facebook.png" class="img-responsive" /></div>
               <div class="col-xs-3" style="text-align:center;"><img src="img/twitter.png" class="img-responsive" /></div>
             <div class="col-xs-3 "></div>
        </div>
              <div class="row EnterbyMailText" >
                  <div class="col-sm-12 TextCenter">او عن طريق الايميل</div>
              </div>

               <div class="row LoginModalStyle" >
               <div class="col-sm-8 col-centered"> <input type="email" class="form-control TextCenter " id="exampleInputEmail1" placeholder="الرجاء ادخال ايميلك المشترك به"></div>
        </div>

               <div class="row LoginModalStyle" >
               <div class="col-sm-8 col-centered"> <input type="email" class="form-control TextCenter " id="exampleInputEmail1" placeholder="أسم المستخدم"></div>
        </div>


               <div class="row LoginModalStyle">

               <div class="col-sm-8 col-centered"> <input type="password"  class="form-control TextCenter"  id="exampleInputEmail1" placeholder="كلمة المرور الخاصة بك"></div>
        </div>

      <div class="modal-footer" style="text-align:center;">
        <button type="button" class="btn modalButton">أشترك</button>
      </div>

        </div>

        </div>
    <!-- /.modal-content --> 
  </div>
      <!-- /.modal-dialog --> 
    </div>
<!-- /.modal --> 

<!-- Login Modal -->
<div class="modal fade" id="EnterModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
    <div class="modal-content">
          <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">دخول</h4>
      </div>
          <div class="modal-body"> 
        <div class="row ">
             <div class="col-xs-3 "></div>
              <div class="col-xs-3 " style="text-align:center; "><img src="img/facebook.png" class="img-responsive" /></div>
               <div class="col-xs-3" style="text-align:center;"><img src="img/twitter.png" class="img-responsive" /></div>
             <div class="col-xs-3 "></div>
        </div>
              <div class="row EnterbyMailText" >
                  <div class="col-sm-12 TextCenter">او عن طريق الايميل</div>
              </div>

               <div class="row LoginModalStyle" >
               <div class="col-sm-8 col-centered"> <input type="email" class="form-control TextCenter " id="exampleInputEmail1" placeholder="الرجاء ادخال ايميلك المشترك به"></div>
        </div>
               <div class="row LoginModalStyle">

               <div class="col-sm-8 col-centered"> <input type="password"  class="form-control TextCenter"  id="exampleInputEmail1" placeholder="كلمة المرور الخاصة بك"></div>
        </div>
          <div class="modal-footer" >
        <button type="button" class="btn modalButton">دخول </button>
        <div class="ForgetApassword">نسيت كلمة المرور</div>
      </div>
        </div>
    <!-- /.modal-content --> 
  </div>
      <!-- /.modal-dialog --> 
    </div>
<!-- /.modal -->

Answer 1

添加这些javascript行以在显示任何一个隐藏另一个模式的模态时触发回调。

$('#SignUpModal').on('show.bs.modal', function (e) {
  $('#EnterModal').modal('hide');
});

$('#EnterModal').on('show.bs.modal', function (e) {
  $('#SignUpModal').modal('hide');
});

工作JSFiddle http://jsfiddle.net/JnDf5/

Answer 2

This is documented behavior：

不支持重叠模式
确保不打开模态，而另一个模态仍然可见。一次显示多个模态需要自定义代码。

通常的解决方案是使用第三方模态插件而不是Bootstrap附带的插件：https://github.com/jschr/bootstrap-modal/

Answer 3

在显示新模态之前，我会使用以下内容来关闭开放模态：

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

这适用于任意数量的模态。这会在所有模态上添加一个事件处理程序，以便在发出show.bs.modal事件时（在显示模态之前发生），当前显示的模态（属于.modal和{{ 1}}类）是隐藏的。

打开新模态时隐藏当前打开的模态

3 个答案: