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

Question

我正面临着如何让多个模式对话框在网上运行的问题。 当我在我的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> 

Answer 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>