添加css代碼後，爲什麼模態窗口會隱藏？ （Bootstrap）

Question

我創建了模態窗口。 你可以看到它在這裏很好用。 http://www.bootply.com/R3JfdhIPwu

現在我需要將頁面分爲2個部分 - 左側和右側，右側將被固定。

.right-main { 
position: fixed; 
} 

只要我加入這行CSS模式窗口成爲隱藏：http://www.bootply.com/aYhMZ3fLlM

有沒有人有關於它的解決方案，如何使它可見的想法嗎？

Answer 1

只需將您的模態標記外部的移動到.right-main即可。模式定位通常獨立於DOM結構。我建議將它移動到DOM的頁腳，因爲它不需要立即渲染。還要確定它沒有嵌套在任何可能繼承樣式的元素中（在這種情況下爲.right-main）。

例子：http://www.bootply.com/QfzMfbTahn

<div class="right-main"> 
    <a class="clickable" style=" text-decoration: none; font-size:100px; border-bottom:2px dashed;" data-toggle="modal" data-target="#basicModal">Test</a> 
</div> 

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h4 class="modal-title" id="myModalLabel">Basic Modal</h4> 
     </div> 
     <div class="modal-body"> 
     <h3>Modal Body</h3> 
     </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>