如何在打开另一个弹出窗口时隐藏活动弹出窗口？

时间：2015-12-01 17:56:49

标签： javascript jquery html css bootstrap-modal

我创建了一个bootstrap模式。在这个模态中，我创建了另外两个模态：

  1. 忘记密码
  2. 在此注册

    3. 如何在打开另一个模态时隐藏/重叠当前打开的模态（即忘记密码）？

    我的代码：

    <a href="#"><span class="glyphicon glyphicon-user" data-toggle="modal" data-target="#smallModal"></span></a>

<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModal" aria-hidden="true">
<div class="modal-dialog modal-sm">
<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 text-center" id="smallModal" style="font-size:20px;font-weight:bold;" id="myModalLabel">User Authentication</h4>
  </div>
  <div class="modal-body">

    <form class="form-horizontal" role="form">
<div class="form-group">
  <label class="control-label"></label>
  <div class="col-lg-offset-1 col-sm-10">
   <a href="#" class="btn btn-block btn-social btn-facebook">
<span class="fa fa-facebook"></span> LOG IN FACEBOOK
</a> 
  </div>
</div>
<form class="form-horizontal" role="form">
<div class="form-group">
  <label class="control-label"></label>
  <div class="col-lg-offset-1 col-sm-10">          
    <a href="#" class="btn btn-block btn-social btn-google">
 <span class="fa fa-google-plus"></span> LOG IN GOOGLE
 </a>
  </div>
</div>
</form>
  </div>
<form>
<label><font size="2">Email</font></label><br>
<div class="col-lg-offset-1 col-lg-10">
<input class="form-control input-md" placeholder="E-mail Address"   name="email" type="email"></div><br><br>
<label><font size="2">Password</font></label><br>
<div class="col-lg-offset-1 col-lg-10">
<input class="form-control input-md" placeholder="Password" name="password" type="password"></div><br><br>
<button type="submit" class="btn btn-info">Sign In</button>
</form>

<!-- pop up of forgot password-->  
 <center><a href="#" data-toggle="modal" data-target="#pwdModal" style="color:red;">Forgot your password?</a></center>
 <div class="modal fade" id="pwdModal" tabindex="-1" role="dialog" aria-labelledby="pwdModal" aria-hidden="true">
 <div class="modal-dialog modal-sm">
 <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="text-center" style="font-size:20px;font-weight:bold;">What's my password?</h4>
  </div>
  <div class="modal-body">
    <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="text-center">
                      <div class="panel-body">
                      <p>If you have forgotten your password you can reset it here.</p>


                                <div class="form-group">
                                    <input class="form-control input-md" placeholder="E-mail Address" name="email" type="email">
                                </div>
                                <input class="btn btn-md btn-primary btn-block" value="Send Password" type="submit">

                       </div> 
                    </div>
               </div>
            </div>
        </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

  </div>
 </div>
</div>
</div>
<!--popup ended for forgot password-->

<!--pop up for register-->
<div class="row text-center">
   <a href="#"  data-toggle="modal" data-target="#basicModal">New User???Register here</a>
   </div>   
  <div class="modal fade" id="basicModal" data-backdrop="static">
  <div class="modal-dialog modal-sm">
  <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" style="font-size:19px;font-weight:bold">Register Here</h4></center>
  </div>
  <div class="modal-body">
 <center><form>
 <label><font size="2">FirstName</font></label><input class="form-control input-sm" placeholder="Enter first name" name="fname" type="text">
 <label><font size="2">LastName</font></label><input class="form-control input-sm" placeholder="Enter last name" name="lname" type="text">
 <label><font size="2">Email</font></label><input class="form-control input-sm" placeholder="E-mail Address" name="uemail" type="email">
 <label><font size="2">Password</font></label><input class="form-control input-sm" placeholder="Password" name="upassword" type="password">
 <label><font size="2">Re-Password</font></label><input class="form-control input-sm" placeholder="Confirm Password" name="rpassword" type="password">
</form>

</div>
<div class="modal-footer">
    <a href="#" class="btn btn-danger" data-dismiss="modal">Close</a>
  </div>
  </div>
 </div>
 </div>
 <!--popup ended for register-->


  <div class="modal-footer">
    <button type="button" class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
   </div>
  </div>
 </div>

1 个答案:

答案 0 :(得分：0)

你的方法的问题是你有嵌套的表格，所以先修复<form></form>，第二个问题是你有嵌套的模态，所以从主模态中删除模态，

主要模式

<a href="#"><span class="glyphicon glyphicon-user" data-toggle="modal" data-target="#smallModal"></span></a>
<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModal" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <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 text-center" id="smallModal" style="font-size:20px;font-weight:bold;" id="myModalLabel">User Authentication</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="control-label"></label>
                        <div class="col-lg-offset-1 col-sm-10"> <a href="#" class="btn btn-block btn-social btn-facebook">
                                <span class="fa fa-facebook"></span> LOG IN FACEBOOK
                            </a> 
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label"></label>
                        <div class="col-lg-offset-1 col-sm-10"> <a href="#" class="btn btn-block btn-social btn-google">
                                <span class="fa fa-google-plus"></span> LOG IN GOOGLE
                            </a>
                        </div>
                    </div>
                </form>
            </div>
            <form class="form-horizontal" role="form">
                <label><font size="2">Email</font>
                </label>
                <br>
                <div class="col-lg-offset-1 col-lg-10">
                    <input class="form-control input-md" placeholder="E-mail Address" name="email" type="email">
                </div>
                <br>
                <br>
                <label><font size="2">Password</font>
                </label>
                <br>
                <div class="col-lg-offset-1 col-lg-10">
                    <input class="form-control input-md" placeholder="Password" name="password" type="password">
                </div>
                <br>
                <br>
                <button type="submit" class="btn btn-info">Sign In</button>
                </form>
                <!-- pop up of forgot password-->
                <center><a href="#" data-toggle="modal" data-target="#pwdModal" style="color:red;">Forgot your password?</a>
                </center>
                <!--popup ended for forgot password-->
                <!--pop up for register-->
                <div class="row text-center"><a href="#" data-toggle="modal" data-target="#basicModal">New User???Register here</a>
                </div>
                <!--popup ended for register-->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Close</button>
                </div>
        </div>
    </div>
</div>

密码模式

<div class="modal fade" id="pwdModal" tabindex="-1" role="dialog" aria-labelledby="pwdModal" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="text-center" style="font-size:20px;font-weight:bold;">What's my password?</h4>
            </div>
            <div class="modal-body">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="text-center">
                            <form class="form-horizontal" role="form">
                                <div class="panel-body">
                                    <p>If you have forgotten your password you can reset it here.</p>
                                    <div class="form-group">
                                        <input class="form-control input-md" placeholder="E-mail Address" name="email" type="email">
                                    </div>
                                    <input class="btn btn-md btn-primary btn-block" value="Send Password" type="submit">
                                </div>
                            </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

注册模式

<div class="modal fade" id="basicModal" data-backdrop="static">
    <div class="modal-dialog modal-sm">
        <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" style="font-size:19px;font-weight:bold">Register Here</h4>
                </center>
            </div>
            <div class="modal-body">
                <center>
                    <form class="form-horizontal" role="form">
                        <label><font size="2">FirstName</font>

                        </label>
                        <input class="form-control input-sm" placeholder="Enter first name" name="fname" type="text">
                        <label><font size="2">LastName</font>

                        </label>
                        <input class="form-control input-sm" placeholder="Enter last name" name="lname" type="text">
                        <label><font size="2">Email</font>

                        </label>
                        <input class="form-control input-sm" placeholder="E-mail Address" name="uemail" type="email">
                        <label><font size="2">Password</font>

                        </label>
                        <input class="form-control input-sm" placeholder="Password" name="upassword" type="password">
                        <label><font size="2">Re-Password</font>

                        </label>
                        <input class="form-control input-sm" placeholder="Confirm Password" name="rpassword" type="password">
                    </form>
            </div>
            <div class="modal-footer"> <a href="#" class="btn btn-danger" data-dismiss="modal">Close</a>
            </div>
        </div>
    </div>
</div>

现在你可以使用相同的上述模态结构，或者如果你想在新模态打开时关闭之前的开放模态，可以使用modal event listener 

$(document).ready(function () {
    $('#basicModal, #pwdModal').on('show.bs.modal', function () {
            $("#smallModal").modal("hide");
    });  

    $('#basicModal, #pwdModal').on('hidden.bs.modal', function () {
            $("#smallModal").modal("show");
    });   
});

Fiddle

相关问题
最新问题