多模式对话框导致浏览器无法加载答案

【问题标题】：Multiple Modal Dialog Cause Browser unable to load多模式对话框导致浏览器无法加载
【发布时间】：2015-07-11 08:00:12
【问题描述】：

我遇到了一些关于如何允许多模式对话框在网络上运行的问题。当我在我的 HTML 代码中包含 2 个模式对话框时，网页无法加载。

基本上这是我的 HTML 代码

            <div class="form-group">
                <label>New User?
                    <a id="btn_signup_now" runat="server" data-toggle="modal" href="#mySignUp" data-backdrop="true">
                     Sign Up For Free Now
                        </a>
                </label>
            </div>


<div id="mySignUp" class="modal hide fade" role="dialog" tabindex="-1">
        <div class="modal-header">
            <asp:Button runat="server" class="close" data-dismiss="modal" aria-hidden="true" Text="*"/>
            <h4 class="modal-title" id="myModalSignUp">Candidate Sign Up</h4>
        </div>

【问题讨论】：

标签： html asp.net twitter-bootstrap modal-dialog

【解决方案1】：

你的代码应该更接近这个：

您缺少许多使模态框正常工作所必需的元素，并且有一些元素可能也会破坏它。你需要这个target="#mySignUp" 来调用modal，你还缺少<div class="modal-content"> 和<div class="modal-header">（如果你觉得需要的话，还有页脚<div class="modal-footer">。当我测试它时，你的隐藏课程打破了它，但这可能是特定于你正在做的事情。

<div class="form-group">
    <label>New User? <a id="btn_signup_now" runat="server" data-toggle="modal" target="#mySignUp" href="#mySignUp" data-backdrop="true"> Sign Up For Free Now</a></label>
</div>
<div id="mySignUp" class="modal fade" role="dialog" tabindex="-1">
    <div class="modal-content">
        <div class="modal-header">
            <div class="modal-body">
                 <h4 class="modal-title" id="myModalSignUp">Candidate Sign Up</h4>
            </div>
            <div class="modal-footer">
                <asp:Button runat="server" class="close" data-dismiss="modal" aria-hidden="true" Text="*" />
            </div>
        </div>
    </div>
</div>

【讨论】：