Jquery 打开新模式时隐藏当前打开的模式

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

这是我的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 --> 

&时代；
قم بالاشتراك الان بكل سهولة و تتمتع بتجربة لا مثيلا لها
او عن طريق الايميل
أشترك
&时代；
دخول
او عن طريق الايميل
دخول 
نسيت كلمة المرور

添加这些javascript行，以便在显示任何一种模式时触发回调，而这两种模式都应该隐藏另一种模式

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

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

工作

：

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

---

通常的解决方案是使用此第三方模式插件，而不是使用Bootstrap附带的插件：

在显示新模式之前，我会使用以下方法关闭打开的模式：

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

这将适用于任意数量的模态。这将在所有模态上添加一个事件处理程序，以便在发出

show.bs.modal

事件（发生在模态显示之前）时，当前显示的模态（属于

.modal

和

.in

类）被隐藏