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中默认显示none的原因是因为如果某人禁用了javascript我不想要任何干扰

Answer 1

请提供您自己的自定义表格验证，因为我没有补充相关的背景。这应该放在一个准备好的文档中或者放在setInterval JavaScript函数中（后者通常会产生更好的结果）。

An error has occurred

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.

已更改为使用点击事件

在等待时显示加载div并提交覆盖

2 个答案: