我想在单击表单按钮后显示动画 gif。
更新:我在这里找到了解决方案:http://www.corelangs.com/css/box/fulloverlay.html
我将其与动画 gif(而不是登录表单)结合起来以获得我想要的效果。
我在脚本中使用了 .show() 方法，如下所示:
$(document).ready(function () {
$("#my_submit").click(function(e) {
console.log("please wait...");
$( "#processing_gif" ).show();
$( "#cover" ).show();
在我的表单中，我使用了这些 div:
<div id="processing_gif"></div>
<div id="cover"></div>
我使用了这个 CSS:
#processing_gif {
position:fixed;
top:0;
left:0;
z-index:999;
width:100%;
height:100%;
opacity:0.8;
background: url('/files/animation_processing.gif') center center no-repeat;
display:none;
}
#cover{
position:fixed;
top:0; left:0;
background:rgba(256,256,256,0.9);
z-index:1;
width:100%;
height:100%;
display:none;
}
这是完整的原始教程:
<!DOCTYPE html> <html > <head> <style type="text/css"> .button { width: 150px; padding: 10px; background-color: #FF8C00; box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2); font-weight:bold; text-decoration:none; } #cover{ position:fixed; top:0; left:0; background:rgba(0,0,0,0.6); z-index:5; width:100%; height:100%; display:none; } #loginScreen { height:380px; width:340px; margin:0 auto; position:relative; z-index:10; display:none; background: url(login.png) no-repeat; border:5px solid #cccccc; border-radius:10px; } #loginScreen:target, #loginScreen:target + #cover{ display:block; opacity:2; } .cancel { display:block; position:absolute; top:3px; right:2px; background:rgb(245,245,245); color:black; height:30px; width:35px; font-size:30px; text-decoration:none; text-align:center; font-weight:bold; } </style> </head> <body> <div align="center"> <br><br><br><br> <a href="#loginScreen" class="button">Click here to Log In</a> </div> <div id="loginScreen"> <a href="#" class="cancel">×</a> </div> <div id="cover" > </div> </body> </html>
最佳答案
您可以在 $.ajax(params) 之前添加 $("my_image_selector").show() ，并在发生“成功”或“错误”时通过添加 $("my_image_selector").hide()< 来隐藏它/p>
或者您可以使用.ajaxStart 和.ajaxStop。 see jquery docs
关于javascript - 提交长 Javascript 请求时显示等待消息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27085750/