javascript - 等待时在提交时显示带有叠加层的加载 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 = "";
}
});