有如下div:

<div id='pop-div' class="pop-box">
<div class="input-group has-info">
<input class="form-control" id="bankCode" type="text" placeholder="请输入银行卡号" />
<span class="input-group-addon" id="checkBtn" ng-click="checkBtn()"><i class="searchicon fa fa-credit-card"></i> 银行卡校验</span>
</div>
</div>

调用一下方法弹出该div

//遮罩层
function popupDiv(div_id) {
divid = div_id;
var div_obj = $("#" + div_id);
var windowWidth = document.body.clientWidth;
var windowHeight = document.body.clientHeight;
var popupHeight = div_obj.height();
var popupWidth = div_obj.width();
//添加并显示遮罩层
$("<div id='mask'></div>").addClass("mask")
.width("100%")
.height("100%")
.click(function () { hideDiv(div_id); })
.appendTo("body")
.fadeIn(200);
div_obj.css({ "position": "absolute" })
.animate({
left: windowWidth / 2 - popupWidth / 2,
top: windowHeight / 2 - popupHeight / 2, opacity: "show"
}, "slow");
} function hideDiv(div_id) {
$("#mask").remove();
$("#" + div_id).animate({ left: 0, top: 0, opacity: "hide" }, "slow");
$("#bankCode").val("");
}

对应css代码:

.pop-box {
z-index:; /*这个数值要足够大,才能够显示在最上层*/
margin-bottom: 3px;
display: none;
position: absolute;
background: #FFF;
border: solid 1px #EAEAF3;
top: 185px !important;
} .pop-box-body {
clear: both;
margin: 4px;
padding: 2px;
} .mask {
background-color: rgba(234, 237, 248, 0.8);
position: absolute;
top: 0px;
left: 0px;
filter: Alpha(Opacity=60);
} .input-group {
width: 1000px;
height: 45px;
} .form-control {
height: 45px;
}

前端小结(3)---- 添加遮罩层,并弹出div的更多相关文章

  1. js 带遮罩层的弹出层

    最近有个小伙伴问我关于mui的带遮罩层的弹出层,我给他发了个相关demo,但是因为他是新手的原因没有看懂,所以我写了一个单纯的原生的带遮罩层的弹出层dome.写这篇微博希望可以帮到需要的小伙伴. &l ...

  2. web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开

    https://blog.csdn.net/zgsdzczh/article/details/79744838 web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开   <style typ ...

  3. 【Javascript Demo】谷歌地图简单实现(附遮罩层和弹出层实现)

    虽然百度地图实现了,但只是国内的,而且前几天貌似还出问题了,对于国际的只能用谷歌地图了,所以就简单研究了下,做了个差不多的. 基本步骤,谷歌地图API文档其实写的很清楚了,先获取API密钥,然后引用j ...

  4. 【Javascript Demo】遮罩层和弹出层简单实现

    最近纠结于遮罩层和弹出层的实现,终于搞定了个简单的版本.示例和代码如下,点击按钮可以看到效果: 1.示例: 2.代码: <!DOCTYPE html PUBLIC "-//W3C//D ...

  5. Axure Base 09 带遮罩层的弹出框

    示例原型下载:小楼Axure原创元件-带遮罩层的弹出框 实现目标: 1.   点击按钮弹出带遮罩层的对话框: 2.   页面上下左右滚动时,弹出的对话框水平和垂直始终居中. 实现步骤如下: 1. 拖入 ...

  6. js特效遮罩层(弹出层)

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  7. html 遮罩层以及弹出框的制作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. element-ui 弹出组件的遮罩层在弹出层dialog模态框的上面

     造成的原因: 因为dialog的组件外层div设置了 position:absolute: 属性所以导致遮罩层会在最上面. 解决方法: 在属性内加上这段代码 :append-to-body=&quo ...

  9. element ui 弹出组件的遮罩层在弹出层的上面的解决方法

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" :modal-append-to-bo ...

  10. js弹出div层内容(按回退键关闭div层及遮罩)

    <!--弹出的div列表对应的详情--> <div id="newhtml" class="white_content"> <di ...

随机推荐

  1. “全栈2019”Java第十三章:基本数据类型

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  2. django 保存订单乐观锁的使用

    后端在生成订单表的时候,牵扯到如下的知识点: 1 事物 2 高并发 3 时间函数的使用 一,事务: from django.db import transaction save_id = transa ...

  3. Windows 下目录切换以及挂载小技巧

    Windows 下目录切换以及挂载小技巧 一.前言: 作为几年的 Linux 老用户,再购买了一款新的本本只支持 Windows(主要是Linux下的驱动)操作系统后,加之发现 Windows 提供 ...

  4. iptables总结

        iptables: 包过滤型防火墙      Firewall: 防火墙,隔离工具:工作于主机或网络的边缘,对于进出本主机或网络的报文根据事先定义好的检查规则作匹配检测,对于能够被规则所匹配到 ...

  5. oracle navicat 可视化操作进行数据的修改

    在进行oracle数据库中的数据操作编辑时,需要小心.oracle内置的安全机制是无处不在,并且很有必要存在的. 使用navicat对oracle中数据进行select操作时,查询出的结果是只读的,这 ...

  6. sqlalchemy 常用总结

    mysql-5.7安装 https://blog.csdn.net/since_1904/article/details/70233403 flask-sqlalchemy教程 http://www. ...

  7. leetcode 191:统计1的个数;5 最长回文串;54,59 蛇形矩阵

    class Solution { public: int hammingWeight(uint32_t n) { ; //统计次数 ){ n &= (n-); //每次消掉一个1 k++; / ...

  8. ZOJ - 2112 主席树套树状数组

    题意:动态第k大,可单点更新,操作+原数组范围6e4 年轻人的第一道纯手工树套树 静态第k大可以很轻易的用权值主席树作差而得 而动态第k大由于修改第i个数会影响[i...n]棵树,因此我们不能在原主席 ...

  9. Mbps、Kbps、KBps的关系

    1. 每秒钟传输的二进制位数的单位:bps.Kbps.Mbps Mbps是Million bits per second的缩写,它的意思是时间内传输数据的平均比特数. Mbps=Mbit/s即兆比特每 ...

  10. 使用FCM服务

    1.建谷歌账号 2.在console上新建应用 https://console.firebase.google.com 并下载私钥.json 3.创建测试网页应用 (或app应用) C#服务端: 用H ...