一，效果

二，素材

三，代码

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=no">
 <title>自适应居中加载点击遮罩效果实现</title>
 <style type="text/css">
 #BgDiv1{background-color:#000; position:absolute; z-index:9999;  display:none;left:0px; top:0px; width:100%; height:100%;opacity: 0.6; filter: alpha(opacity=60);}
 .DialogDiv{position:absolute;z-index:99999;}/*配送公告*/
 .U-guodu-box { padding:5px 15px;  background:#3c3c3f; filter:alpha(opacity=90); -moz-opacity:0.9; -khtml-opacity: 0.9; opacity: 0.9;  min-heigh:200px; border-radius:10px;}
 .U-guodu-box div{ color:#fff; line-height:20px; font-size:12px; margin:0px auto; height:100%; padding-top:10%; padding-bottom:10%;}
 </style>
     <script type="text/javascript" src="https://img.99bill.com/seashell/weixin/js/jquery.js"></script>
 <script language="javascript" type="text/javascript">
      $(function(){
           $('.U-user-login-btn').toggle(function(){
             $("#BgDiv1").css({ display: "block", height: $(document).height() });
             var yscroll = document.documentElement.scrollTop;
             var screenx=$(window).width();
             var screeny=$(window).height();
           $(".DialogDiv").css("display", "block");
               $(".DialogDiv").css("top",yscroll+"px");
              var DialogDiv_width=$(".DialogDiv").width();
              var DialogDiv_height=$(".DialogDiv").height();
               $(".DialogDiv").css("left",(screenx/2-DialogDiv_width/2)+"px")
              $(".DialogDiv").css("top",(screeny/2-DialogDiv_height/2)+"px")
              $("body").css("overflow","hidden");
         },function(){

         })
      })
  </script>
 </head>
 <body>
 <div id="BgDiv1"></div>
 <div class="U-login-con">
             <button  class="U-user-login-btn" >点击</button>

                 <div class="DialogDiv"  style="display:none; ">
                     <div class="U-guodu-box">
                     <div>
                     <table width="100%" cellpadding="0" cellspacing="0" border="0" >
                         <tr><td  align="center"><img src="${rc.contextPath}/js/css/images/loading.gif"></td></tr>
                         <tr><td  valign="middle" align="center" >提交中，请稍后！</td></tr>
                     </table>
                     </div>
                 </div>
              </div>

 </div>
 </body>
 </html>

弹出层罩子html（上传照片弹出请等待后面的代码不能修改）的更多相关文章

  1. requests模拟上传照片

    博客园相册管理中有上传照片的功能 现在通过requests库模拟上传图片功能 先手动上传图片,用Fiddler转包,查看到上传图片接口请求格式, ------WebKitFormBoundarySKZ ...

  2. 【代码笔记】iOS-图片手势，上传照片

    代码: RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIViewControl ...

  3. Iphone H5上传照片被旋转

    最近做项目发现在Iphone下,我们上传图片都会被翻转,最后查阅资料发现,的确是IOS的问题 不说过程,直接解决方法 iOS下,html方式使用<input type="file&qu ...

  4. Android使用XUtils框架上传照片（一张或多张）和文本，server接收照片和文字（无乱码）

    Android上传图片,这里我使用了如今比較流行的XUtils框架.该框架能够实现文件上传.文件下载.图片缓存等等,有待研究. 以下是Android端上传的代码: xUtils.jar下载 Strin ...

  5. Django项目：CRM(客户关系管理系统)--61--51PerfectCRM实现CRM客户报名流程学生合同上传照片

    # sales_views.py # ————————47PerfectCRM实现CRM客户报名流程———————— from django.db import IntegrityError # 主动 ...

  6. mui调用本地相册调用相机上传照片

    调用mui的常用库和jquery html部分: <header class="mui-bar mui-bar-nav"> <a class="mui- ...

  7. C#MVC和cropper.js实现剪裁图片ajax上传的弹出层

     首先使用cropper.js插件,能够将剪裁后的图片返回为base64编码,后台根据base64编码解析保存图片. jQuery.cropper: 是一款使用简单且功能强大的图片剪裁jquery插件 ...

  8. IE中使用ajaxSubmit上传文件弹出下载提示框

    使用jQuery的ajaxSubmit 上传文件时,在IE中会弹出下载提示框: 解决方法:让action返回String类型,而不是ActionView,

  9. edusoho上传视频弹出abort之解决方案

    错误描述:edusoho上传如avi.mp4等容量大的图片(如100m以上或500m等)弹出abort提示框 原因:是因为web服务器apache默认上传文件有限制导致的 解决办法如下: (1)首先修 ...

随机推荐

  1. bzoj 3509: [CodeChef] COUNTARI] [分块 生成函数]

    3509: [CodeChef] COUNTARI 题意:统计满足\(i<j<k, 2*a[j] = a[i] + a[k]\)的个数 \(2*a[j]\)不太好处理,暴力fft不如直接暴 ...

  2. ES6中let和闭包

    在开始本文之前我们先来看一段代码 for(var i=0;i<10;i++){ arr[i]=function(){ return i; } } console.log(arr[3]());// ...

  3. 小甲鱼OD学习第13-14讲

    这次我们的任务是破解这个需要注册码的软件,如下图所示 我们搜索上图相应的提示字符串,看看能找到什么线索,我们搜索  invalid  code  试试看,如下图 然后下断点,如下图所示 我们来到断点处 ...

  4. 用es6的Array.reduce()方法计算一个字符串中每个字符出现的次数

    有一道经典的字符串处理的问题,统计一个字符串中每个字符出现的次数. 用es6的Array.reduce()函数配合“...”扩展符号可以更方便的处理该问题. s='abananbaacnncn' [. ...

  5. zookeeper 内部机制学习

    zookeeper 内部机制学习 1. zk的设计目标 最终一致性:client不论连接到那个Server,展示给它的都是同一个视图. 可靠性:具有简单.健壮.良好的性能.如果消息m被到一台服务器接收 ...

  6. zabbix 网络模板自动发现端口时，过滤掉某些特定规则的端口，减少item的方法

    1.需求描述        默认情况下Zabbix 模板 中网络接口自动发现接口时,会产生很多item,有时候会有我们不需要的一些接口,这时候需要过滤掉他们.        比如我有一台运行kvm的服 ...

  7. MarkDown 编辑数学公式

    1. 参考博客:http://blog.csdn.net/smstong/article/details/44340637 1 数学公式的web解决方案 在网页上显示漂亮的数学公式,是多年来数学工作者 ...

  8. linux scp远程拷贝文件及文件夹

    [http://www.jb51.net/LINUXjishu/73131.html] 1.拷贝本机/home/administrator/test整个目录至远程主机192.168.1.100的/ro ...

  9. Vuex源码解析

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...

  10. python并发编程之多进程(二)：互斥锁（同步锁）&进程其他属性&进程间通信（queue）&生产者消费者模型

    一,互斥锁,同步锁 进程之间数据不共享,但是共享同一套文件系统,所以访问同一个文件,或同一个打印终端,是没有问题的, 竞争带来的结果就是错乱,如何控制,就是加锁处理 part1:多个进程共享同一打印终 ...