jquery簡單實現表單提交後的需要等待效果
阿新 • • 發佈：2019-02-07
簡單來說就是遮罩然後載入個動畫，往上有利用js手動更改html值實現緩衝動畫的，比較麻煩，感覺價效比不高，畢竟誰也不會沒事一直在那載入很多張這種等待動畫。
主要也就是利用了position裡面的fixed這個屬性，設定之後頁面內的其他元素均不可點選，保證頁面安全
<!DOCTYPE html> <html> <head> //連結檔案就不寫了，自己調一下就ok .cover { text-align: center; } //position下面的left和right屬性，還有top和bottom,通過這四種維度來控制position屬性為fixed的元素的位置，具體效果大家可以實踐一下 #layout { text-align: center; position:fixed; left: 0; right: 0; display: none; } </style> </head> <body> <div class="cover"> <a id="saveBtn" onclick="test()">測試按鈕</a> </div> <div id="layout"> <img src="loading.gif" /> <p>正在提交，請稍後。。。</p> <button id="closeBtn" onclick="testBtn1()">關閉</button> </div> </body> <script type="text/javascript"> function test(){
<span style="white-space:pre"> </span>//opacity的取值從0~1，預設為1，越小越模糊，專業點叫透明度
$('.cover').css('opacity','0.2');
$('#layout').css('display','block');
};//實際開發中下面的程式碼可以加入ajax的回撥函式中 function testBtn1(){ $('.cover').css('opacity',''); $("#layout").css('display','none'); }; </script> </html>