引导模态在单击其正文时会触发其他模态
Bootstrap modal triggers other modal when clicked on it's body
我在一页上运行的三种模式之一遇到问题。当它可见并且您单击它的正文时,它会打开它后面的另一个。
这是打开的:
<span class="help-block"><a href="#klarnaModal" data-toggle="modal">@Html.Raw(ptype.Description.StripHtml())</a></span>
<div id="klarnaModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="klarnaModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-contents">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="klarnaModalLabel">@Html.Raw(ptype.Description)</h3>
</div>
<div class="modal-body">
<iframe src="https://cdn.klarna.com/1.0/shared/content/legal/terms/24637/sv_se/invoice?fee=0"></iframe>
</div>
</div>
</div>
</div>
以及通过单击另一个正文打开的那个:
<input type="radio" name="paymenttype" id="@ptype.Id" value="@ptype.Id" data-toggle="modal" data-target="#klarnaSubmitModal" data-remote="true" />
<div id="klarnaSubmitModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="klarnaSubmitModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-contents">
<div class="modal-header">
<button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="klarnaSubmitModalLabel"><i class="icon icon-info-sign"></i>Vigtigt</h3>
</div>
<div class="modal-body">
Det er ikke muligt at benytte alternativ leveringsadresse sammen med Klarna Faktura.<br /><br />
Vælger du at fortsætte vil din ordre blive leveret til faktureringsadressen.<br /><br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-medium btn-primary" id="acceptklarna-btn">
<i class="icon icon-ok-sign"></i><b><span>Fortsæt</span></b>
</button>
<button type="button" class="btn btn-medium btn-primary" id="resetpayment-btn">
<i class="icon icon-circle-arrow-down"></i><span>Vælg en anden betalingsmetode</span>
</button>
</div>
</div>
</div>
</div>
编辑!这重现了我的问题:http://jsfiddle.net/mPWw4/3/
为什么两者是相连的,以至于点击第一个身体会打开另一个?
- 将您的模态移到主 html 之外。 我会推荐靠近你
</body>
标签末尾的地方。
另外,作为 - 旁注,您在模态上的一些标记,例如
<div class="modal-dialog">
和<div class="modal-content">
适用于 Bootstrap 3.0,因为您使用 bootstrap 2.3.2 您并不真正需要它。
我通过将模态移出主 html 来更新您的小提琴,它按预期工作。
http://jsfiddle.net/mPWw4/4/
相关文章:
- 我想使用模态通过php文件发送邮件,并且我希望在提交关闭后关闭pop
- 打开一个模态并将其链接到AngularJS中的指令
- SemanticUI模态not onDeny/onApprove事件未激发
- 有没有比在app.js上绑定模块名称更好的方法来动态加载视图模型和视图以显示模态
- 如何通过所选索引(AngularJS)在模态弹出窗口中显示数据
- 包含数据库中相关信息的开放模态
- bootstrap消除模态并显示另一个模态
- 模态提示-如何重写此代码
- 模态框无法正常工作
- 如何将一个模态放在一边-显示其他模态(像..这样的向导)
- 我开发了一个api,我希望它重定向到其他php页面,并在我点击api文件中的按钮时弹出模态
- 引导模态在单击其正文时会触发其他模态
- 为什么Angular UI引导使用提供程序来处理模态和工具提示中的逻辑,而不在其他组件中
- 我正在做一个ajax调用加载内容到模态对话框;它似乎在所有其他浏览器上工作,而不是IE
- 如何阻止用户点击任何其他按钮,而页面刷新(从模态窗口解决方案的一部分)
- 如何在不影响其他模态的情况下用CSS改变模态的宽度?
- MDL模态按钮适用于一张卡,但不适用于其他卡
- 从后端加载的模态被其他元素覆盖
- 使jQuery模态不阻塞其他UI元素
- 带有Name属性的jQuery模态对话框表单输入没有与其他表单数据一起发送