2015-10-21 32 views
1

我有一個模式可以打開並顯示信息。在模式中,有一個註冊按鈕。點擊該按鈕後,它會關閉第一個模式並打開一個新的「註冊」模式。當我關閉該模式時,問題就出現了,模式消失了,但背景仍然不透明,我無法訪問它後面的頁面。這是我的代碼。我希望模態在完成時單擊任何按鈕或關閉模態本身作爲默認行爲。從第一個模式中的按鈕打開另一個模式時的自舉模式問題

<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">&times;</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> 
+0

只是一個建議:jQuery插件 - https://github.com/jschr/bootstrap-modal – makshh

回答

0

。在你的代碼中的錯誤:

<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"添加到第二個模態。

相關問題