显示加载div时提交等待叠加

我可以让他们显示，如果我做的window.onload()但divs必须有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我不想让任何inteference

来源

2015-07-13 thechrishaddad

-1

试试这个：

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

的淡入将使DIV可见。

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

改为使用click事件

来源

2015-07-13 00:47:04 user2182349

这没有奏效：如果我把它放在head元素或脚本的底部，S是否重要？我认为这并不重要。 – thechrishaddad

因为它是一种形式，所以最好包装这个功能是一个条件，它会在发射之前检查表单是否有效。然后将其包装在onclick函数中，执行以下操作：$（'＃dvLoading，#overlay，＃overlay-back'）。toggle（500）; –

因为$（function（）包装器。 – user2182349

请提供自己的自定义表单验证，因为我有没有上下文来补充。这应该放在一个准备好的文档中，或者放在一个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 = ""; 
} 
});

来源

2015-07-13 01:12:46

显示加载div时提交等待叠加

回答

相关问题