如何在打開另一個彈出窗口時隱藏活動彈出窗口？
[英]How do you hide an active popup while opening another popup?
問題描述
我創建了一個引導模態。 在此模態內，我創建了另外兩個模態：
- 忘記密碼了嗎
- 在這里注冊
打開另一個模態（即忘記密碼）時，如何隱藏/重疊當前打開的模態？
我的代碼：
<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">×</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">×</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">×</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 個解決方案
解決方案1
0 已采納 2015-12-01 19:00:12
方法的問題是您有嵌套的表單，因此首先要修復<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">×</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">×</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">×</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");
});
});
您如何檢測Chrome中是否阻止了彈出到另一個域的彈出窗口？
[英]How do you detect if a popup to another domain was blocked in Chrome?
關閉彈出窗口，然后打開另一個vs.打開另一個彈出窗口
[英]Close popup and then open another vs. opening popup while another one is open
僅當 promise 處於活動狀態時，如何顯示和隱藏彈出窗口？ 反應
[英]how to show and hide popup only when promise is active ? React
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.