在等待時顯示帶有提交覆蓋的加載div

Question

當我單擊提交時，我的div沒有顯示。

我可以讓他們顯示是否執行window.onload()但div必須display: none; 默認;

我該怎么做，以便這些div在我單擊“提交”時顯示，因為我的表單大約需要30秒來處理，它包含很多字段。

的HTML

<div id="overlay-back"></div>
<div id="overlay">
    <div id="dvLoading">
        <p>Please wait<br>while we are loading...</p>
        <img id="loading-image" src="img/ajax-loader.gif" alt="Loading..." />
    </div>
</div>

提交按鈕

  <div class="form-buttons-wrapper">
        <button id="submit" name="submit" type="submit" class="form-submit-button">
             Submit
        </button>
  </div>

的CSS

#overlay {
position : absolute;
top      : 0;
left     : 0;
width    : 100%;
height   : 100%;
z-index  : 995;
display  : none;
} 
#overlay-back {
position   : absolute;
top        : 0;
left       : 0;
width      : 100%;
height     : 100%;
background : #000;
opacity    : 0.6;
filter     : alpha(opacity=60);
z-index    : 990;
display    : none;
}
#dvLoading {
padding: 20px;
background-color: #fff;
border-radius: 10px;
height: 150px;
width: 250px;
position: fixed;
z-index: 1000;
left: 50%;
top: 50%;
margin: -125px 0 0 -125px;
text-align: center;
display: none;
}

jQuery的

<script>
$(function() {
    $('#submit').on('submit', function() {
        $('#dvLoading, #overlay, #overlay-back').prop("display", "block").fadeIn(500);
    });    
});    
</script>

默認情況下，我在CSS中不顯示任何內容的原因是，如果有人禁用了javascript，我就不需要任何干預

Answer 1

請提供您自己的自定義表單驗證，因為我沒有上下文可以對此進行補充。 應該將其放置在文檔中，或者放置在setInterval JavaScript函數中（后者通常會產生更好的結果）。

$('button#submit').click(function() {
If (formValid === true &&  $('#dvLoading, #overlay, #overlay-back').not(':visible');)
{
    $('#dvLoading, #overlay, #overlay-back').toggle(500);
    $('button#submit').toggle(500); //hide this to prevent multiple clicks and odd behavior
} else {
var doNothing = "";
}
}); 

Answer 2

嘗試這個：

<script>
$(function() {
    $('#submit').on('click', function(evt) {
        evt.preventDefault();
        $('#dvLoading, #overlay, #overlay-back').fadeIn(500);
    });    
});    
</script> 

fadeIn將使div可見。

.prop sets the properties of the element, not the style.

• 更改為使用click事件