jq 简单加载框与提示框
Posted 9608kai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jq 简单加载框与提示框相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>登录</title> <style type="text/css">
/*加载css*/ .background { display: block; width: 100%; height: 100%; opacity: 0.4; filter: alpha(opacity=40); background:while; position: absolute; top: 0; left: 0; z-index: 2000; } .progressBar { border: solid 2px #86A5AD; background: white url(image/img.gif) no-repeat 10px 20px; background-size:28px; } .progressBar { display: block; width: 160px; height:50px; position: fixed; top: 50%; left: 50%; margin-left: -74px; margin-top: -14px; padding: 10px 10px 10px 50px; text-align: left; line-height: 50px; font-weight: bold; position: absolute; z-index: 2001; }
/*提示图片*/ #successImg{ width: 58px; height: 58px; margin: 0px auto; background: url("image/warning.png") no-repeat ; border:none; } </style> </head> <body>
/*加载html*/ <div class="login_cont"> <div id="background" class="background" style="display: none; "></div> <div id="progressBar" class="progressBar" style="display: none; ">登录中，请稍等...</div> </div> <script src="js/jquery.min.js"></script> <script> jQuery.extend({ alertWindow:function(e,n){var e=e,r;n===undefined?r="#00a8b7":r=n; if($("body").find(".alertWindow1").length===0){ var i=‘<div class="alertWindow1" style="width: 100%;height: 100%; background:rgba(0,0,0,0.5);position: fixed; left:0px; top: 0px; z-index: 9999;"><div style="width: 360px; height: 170px;background: #FFF;margin: 300px auto;border: 2px solid #CFCFCF;">‘+‘<div style="width: inherit;height: 20px;">‘+‘<div class="alertWindowCloseButton1" style="float: right; width: 10px; height: 30px;margin-right:5px;font-family:‘microsoft yahei‘;color:‘+r+‘;cursor: pointer;"></div>‘+"</div>"+‘<div id="successImg" class="alertWindowTitle" style="margin-top:10px;text-align:center;font-family:‘Verdana, Geneva, Arial, Helvetica, sans-serif‘;font-size: 18px;font-weight: normal;color: ‘+r+‘;">‘+"</div>"+‘<div class="alertWindowContent" style="width:360px;height: 40px;text-align:center;font-size: 18px;color: #7F7F7F;margin-top:10px;">‘+e+"</div>"+"</div>"+"</div>"; $("body").append(i); var s=$(".alertWindow1"); setTimeout(function(){s.hide()},2000); }else { $(".alertWindowContent").text(e),$(".alertWindow1").show(),setTimeout(function(){$(".alertWindow1").hide()},1000);} } }); function login() {
/*加载框*/ var ajaxbg = $("#background,#progressBar"); $.ajax({ type:"POST", dataType:"json", url:"", data:“”, beforeSend:function(){
/*加载框显示*/ ajaxbg.show(); }, success:function(result) { if(result.status == 100){ }else{ ajaxbg.hide();//接口完成后加载框关闭 jQuery.alertWindow(result.msg);//提示 } } }); } </script> </body> </html>
以上是关于jq 简单加载框与提示框的主要内容，如果未能解决你的问题，请参考以下文章