[英]Bootstrap modal issue when opening another modal from button inside first modal
我有一个可以打开并显示信息的模式。 在模式中,有一个注册按钮。 单击该按钮后,它将关闭第一个模式,并打开一个新的“注册”模式。 当我关闭该模式时,就会出现问题,该模式消失了,但背景仍然不透明,无法访问其后面的页面。 这是我的代码。 我希望模态在单击任何按钮时完全关闭,或者像默认行为那样关闭模态本身。
<div class="modal fade" id="register-for-fame" tabindex="-1" role="dialog" aria-labelledby="registerForFame">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="registerForFame">Register For Fame</h4>
</div>
<div class="modal-body">
<p>
Some text
</p>
<p>
more text
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary flow-left" data-dismiss="modal">
Not right now
</button>
<button type="button" class="btn btn-primary register-user" data-dismiss="modal">
<a href="#" data-toggle="modal" data-target=".register-user">want to register!</a>
</button>
</div>
</div>
</div>
</div>
<div class="modal fade register-user" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content padding-sides">
<h3 class="center">Register!</h3>
</br>
<input type="text" class="form-control" id="user-name" size="30" placeholder="Username:">
</br>
<input type="text" class="form-control" id="password" size="30" placeholder="Password:">
</br>
<input type="text" class="form-control" id="confirmation-password" size="30" placeholder="Confirm Password:">
</br>
<input type="text" class="form-control" id="email-address" size="30" placeholder="Email (optional):">
</br>
<p>some text</p>
<button type="button" class="btn btn-primary flow-left" data-dismiss="modal" data-toggle="modal">
Not right now
</button>
<button type="button" class="btn btn-primary submit-registration flow-right" data-dismiss="modal" data-toggle="modal">
Register me!
</button>
</div>
</div>
</div>
您的代码中有一个错误:
<button type="button" class="btn btn-primary register-user" data-dismiss="modal">
<a href="#" data-toggle="modal" data-target=".register-user">want to register!</a>
</button>
查看您的数据目标(按钮具有的register-user
类)。
将目标更改为#register-user
,并将id="register-user"
到第二个模式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.