多模式對話框導致瀏覽器無法加載

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>