2016-02-01 77 views
0

我有一個Bootstrap模塊小部件出現在模態的灰色後臺後面,阻止我用模式本身做任何事情,當我點擊模態本身時它仍然消失。Bootstrap Modal後臺後臺

我檢查了我在這裏找到的其他建議的解決方案,以及其他站點,包括將它移到任何父容器的外部,以便它在開始的body標記之後,就在關閉body標記之前,我甚至嘗試過一種不符合標準的方法是將它放在閉合頭標籤和開啓體標籤之間,並且所有這些方法都導致了相同的問題。結果是,無論我在哪裏定位模態,我都會遇到同樣出現在灰色後臺後面的模態本身的問題。

我的HTML模式是...

<!-- Admin Login Modal --> 
    <div id="admin-login-modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true"> 
     <div class="modal-dialog modal-lg"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button> 
        <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
       </div> 
       <div class="modal-body"> 
        <h4>Text in a modal</h4> 
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> 
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary">Save changes</button> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- End Login Modal --> 

就目前而言我把它定位在開口體標記之後。

任何援助與此表示讚賞。

+0

在關閉主體標記之前放置模態HTML – Shehary

+0

仍然沒有把標記放在關閉主體標記之前。 –

+0

你可能想看看這個:http://stackoverflow.com/questions/10636667/bootstrap-modal-appearing-under-background?rq=1 – Dimitry

回答

0

我已成功地解決這一問題,內bootstrap.min.css樣式定位類。模態對話框並添加z-index:1050 ;.

0

刪除您的代碼並粘貼那麼這段代碼檢查..我認爲它會正常工作

<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <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="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div>` 
+0

這並沒有奏效穆罕默德。 –

+0

你能給我發送你的網頁的網址嗎?你在線工作還是在本地主機上工作? –

+0

我正在使用本地主機,所以無法發送頁面的URL,我已經解決了這個問題,請參閱上述解答的答案。 –