顯示加載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時提交等待疊加

回答

相關問題