Bootstrap在頁面加載緩慢時會暫時顯示隱藏的模式對話框

我在Rails應用程序中使用Bootstrap 2.3.2通過bootstrap-sass-2.3.2.2 gem。Bootstrap在頁面加載緩慢時會暫時顯示隱藏的模式對話框

用下面的HTML：

<div class="modal hide fade fullscreen" id="myModal" aria-hidden="true"> 
    <div class="modal-header"> 
     <h3></h3> 
    </div> 
    <div class="modal-body"> 
     <img src=""> 
    </div> 
    <div class="modal-footer"> 
     <a class="figureFullsizeLink btn" href="">Full-size</a> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    </div> 
    </div>

和鏈接這樣的：

<a href="#myModal" class="btn" data-toggle="modal" data-html="true"> 
    <img alt="Fig 1" class="figure" src="http://s3.amazonaws.com/..." title="..." /> 
    </a>

而下面的javascript：

$(document).ready(function() { 
    ... 
    // hide the modal window onload 
    $("#myModal").css("display", "none"); 
    ... 
});

我得到的開模態對話框的瞬間閃光而頁面正在加載。（請參閱https://www.youtube.com/watch?v=X-HwRpKAUh8）。

來源

2015-04-02 Reed G. Law

不知道你的模態究竟包含什麼，儘管我認爲它應該隱藏默認情況下，你不應該隱藏javascript＃ – mymlyn 2015-04-02 01:41:56

@mymlyn這就是我認爲Bootstrap的「隱藏」類應該做的。但沒有JavaScript或CSS模式對話框開始打開。 – 2015-04-02 07:56:09

您的jQuery代碼在DOM hierarchy has been fully constructed之後運行。因此，DOM加載時將顯示模式，然後JavaScript將執行並隱藏模式。

有默認隱藏的模式最簡單的方法是設置CSS來：

#myModal{display:none};

或者，你可以隨時把你的頁面的

<head>

元素中的jQuery代碼它將在構建DOM之前執行。

來源

2015-04-02 01:14:19 jdegens

謝謝，就是這樣！ Bootstrap的'hide'類認爲它爲我做了這件事，我感到困惑。但是，在將'display：none'應用到'＃myModal'後，我不再看到模式對話框的閃光。 – 2015-04-02 02:19:32

Bootstrap在頁面加載緩慢時會暫時顯示隱藏的模式對話框

回答

相關問題