在第一个模态中打开另一个模态时,启动模态问题
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>
你的代码中有一个bug:
<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"
添加到您的第二个模态
相关文章:
- 我想使用模态通过php文件发送邮件,并且我希望在提交关闭后关闭pop
- 打开一个模态并将其链接到AngularJS中的指令
- SemanticUI模态not onDeny/onApprove事件未激发
- 有没有比在app.js上绑定模块名称更好的方法来动态加载视图模型和视图以显示模态
- 如何通过所选索引(AngularJS)在模态弹出窗口中显示数据
- 包含数据库中相关信息的开放模态
- 从以前的模态启动新的模态
- JQuery 如何在按钮单击时启动模态框(对话框)
- 自动启动视频从模态不使用一个按钮
- 在第一个模态中打开另一个模态时,启动模态问题
- 引导模态启动的增量时间
- 如何在使用jQuery启动的模态中更新-data行属性
- 启动模态打开第二模态,删除前请确认
- 是否有一种方法可以从Highcharts传入变量元素ID来启动模态窗口?
- 启动问题,文件上传不在模态内工作
- 如何在模态启动后更改元素
- 启动模态加载的触发事件
- 如何在每次出现模态窗口时使用第一个图像启动Bootstrap carousel
- 暂停旋转木马在模态启动(引导)
- 启动模态在条件下打开