码迷,mamicode.com
首页 > 其他好文 > 详细

jq 简单加载框与提示框

时间:2020-07-15 15:05:46      阅读:63      评论:0      收藏:0      [点我收藏+]

标签:round   win   warning   ajax   font   function   ext   back   padding   

<!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 简单加载框与提示框

标签:round   win   warning   ajax   font   function   ext   back   padding   

原文地址:https://www.cnblogs.com/9608kai/p/13304674.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!