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

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/