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

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style>

/*该元素是最外层的遮罩层*/
.tiJiao {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;

/*记得提高它的层级*/
z-index: 3;
background-color: rgba(0, 0, 0, 0.2);
}

.tiJiao div.info {
position: absolute;

/*top.lieft 定位后不会完全居中*/
top: 50%;
left: 50%;

/*最重要的是margin的设置，通过负值来实现它的居中*/
margin-left: -125px;
margin-top: -97px;
width: 250px;
background-color: #FFFFFF;
padding: 20px 10px;
box-sizing: border-box;
border-radius: 5px;
}

.tiJiao div.info .info_content {
width: 100%;
display: table;
margin-bottom: 10px;
}

.tiJiao div.info .info_content label.title {
float: left;
height: 30px;
line-height: 30px;
}

.tiJiao div.info .info_content input[type="radio"] {
vertical-align: -10%;
}

.tiJiao div.info .info_content .txt {
float: left;
width: calc(100% - 90px);
border: 1px solid #eee;
box-sizing: border-box;
height: 30px;
text-indent: 5px;
}

.tiJiao div.info .sub {
display: block;
width: 50%;
margin: 0 auto;
height: 36px;
border: none;
background-color: #ff5050;
margin-top: 20px;
border-radius: 5px;
color: #fff;
font-size: 14px;
}

.info_close {
position: absolute;
top: 10px;
right: 10px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
border: none;
}
</style>
</head>
<body>
<div id="div1" style="padding:100px;">弹出层一</div>
/*下面就是弹出层*/
<div id="tiJiao" class="tiJiao" style="display:none">
<div class="info">
<div class="info_content">
<label class="title">
现金支付：
</label>
<input class="txt" type="text" id="zhiFuPay" value="" disabled="disabled" />
<label id="toTal" class="title">元</label>
</div>
<input id="zhifu" class="sub" type="button" value="确认支付" onclick="QueRenZhiFu()" />

<span type="button" class="info_close" id="guanbi" />X</span>
</div>
</div>

<script type="text/javascript">

//一个小demo就不用jq了，原生写一下
var div1=document.getElementById('div1');
var tiJiao=document.getElementById('tiJiao');
var infoClose=document.getElementsByClassName('info_close')
div1.onclick=function(){
//console.log(tijiao)
tiJiao.style.display='block'
}

for(i=0;i<infoClose.length;i++){
 infoClose[i].onclick=function(){
     tiJiao.style.display='none'
  }
}

</script>
</body>

</html>

html部分是从项目中拿出来的，样式我只是稍微一调，有些无关大雅的问题就没改，

js 带遮罩层的弹出层的更多相关文章

  1. 【Javascript Demo】谷歌地图简单实现（附遮罩层和弹出层实现）

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

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

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

  3. js特效遮罩层（弹出层）

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

  4. ASP.NET—013：实现带控件的弹出层（弹出框）

    http://blog.csdn.net/yysyangyangyangshan/article/details/38458169 在页面中用到弹出新页面的情况比较多的,一般来说都是使用JS方法sho ...

  5. bootstrap弹出层嵌套弹出层后文本框不能获得焦点输入

    如图上 我从页面打开一个bootstrap弹出层 然后又在 bootstrap弹出层的基础上打开一个layui的弹出层  打开后发现文本域获取不到焦点不能输入内容 而该弹出层显示的层级体现出来了 按钮 ...

  6. 转 js一个简单实用的弹出层

      关闭 点击查看 >> <html> <head> <title>新文件标题</title> <script type=" ...

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

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

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

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

  9. JS简易弹出层

    目标 实现简易的js弹出框.为了简单灵活的在小项目中使用. 实现思路 研究bootstrap的弹出框效果后,认为层级示意图如下: 层说明 弹出层分为三层.最底层的遮罩层,覆盖在浏览器视口上.它之上是弹 ...

随机推荐

  1. ecshop收货地址货到付款修改

    用户选择某些地址时,支付方式里则可以依据此地址来对货到付款选项进行显示或隐藏.目前仅与顺丰合作,以顺丰提供的数据为准. 使用到的数据库分别如下: ecs_region//地方数据,PRIMARY KE ...

  2. 静态库 .a 转成共享库 .so

    .a 是有一系列 .o 文件通过 ar 程序打包在一起的静态库,要把它转成动态库只需先解开,生成一堆 .o 文件,再通过编译器(比如 gcc 或 ifort,视具体情况而定)编成动态库即可. ar - ...

  3. Laravel踩坑笔记——illuminate/html被抛弃

    起因 在使用如下代码的时候发生报错 {!! Form::open() !!} 错误信息 [Symfony\Component\Debug\Exception\FatalErrorException] ...

  4. 并归排序 (Java版本,时间复杂度为O(n))

    自己上网查了一下并归排序的定义,把两个排序好的数组重新组成一个排序好的数组就是并归排序, 实现的方式有和多种,自己思考了一下,用java实现了一版本,思路如下,既然是排序好的,只需要依次比较两个数组, ...

  5. 用JS来实现于截取中英文混合字符串方法(转载)

    网站制作过程中,提示层文字超出,需要JS做字符串截取,但是呢,我们常常会烦恼文字中英文混合如何判断,因为我们知道在JS中 string.length这个值是不考虑中英文的,但是计算机对中英文的识别是  ...

  6. 搭建带热更新功能的本地开发node server

    引言 使用webpack有一段时间了,对其中的热更新的大概理解是:对某个模块做了修改,页面只做局部更新而不需要刷新整个页面来进行更新.这样就能节省因为整个页面刷新所产生开销的时间,模块热加载加快了开发 ...

  7. PHP中几个输出函数echo，print()，print_r()，sprintf()，var_dump()的区别

    1:echo:是语句不是函数,没有返回值,可输出多个变量值,不需要圆括号.不能输出数组和对象,只能打印简单类型(如int,string). 2:print:是语句不是函数,有返回值 1 ,只能输出一个 ...

  8. 解决jenkins下使用HTML Publisher插件后查看html报告显示不正常 以jmeter报告为例

    jenkins 配置使用html publisher查看jmeter html报告时,发现显示不全,很多东西显示不了.   项目配置:   查看html报告异常(很多资源无法加载):   控制台查看加 ...

  9. JAVA基础——面向对象三大特性：封装、继承、多态

    JAVA面向对象三大特性详解 一.封装 1.概念: 将类的某些信息隐藏在类内部,不允许外部程序直接访问,而是通过该类提供的方法来实现对隐藏信息的操作和访问. 2.好处: 只能通过规定的方法访问数据. ...

  10. C# 哈希表（Hashtable）用法笔记

    一.什么是Hashtable? Hashtable 类代表了一系列基于键的哈希代码组织起来的键/值对.它使用键来访问集合中的元素. 当您使用键访问元素时,则使用哈希表,而且您可以识别一个有用的键值.哈 ...