html:

<div class="popBox">
<div class="pb">
<span class="clousx"></span>
<div class="p-box"></div>
</div>
</div>

css:

.popBox {
position: fixed;
width: 100%;
left: 0;
top: 0;
background: rgba(0,0,0,0.5);
height: 100%;
z-index: 150000;
}
.popBox .pb {
width: 6.58rem;
background: #fff;
display: flex;
justify-content: space-between;
position: relative;
font-size: 0.3rem;
text-align: left;
left: 0.46rem;
padding-top: 0.65rem;
border-radius: 0.1rem;
padding: .92rem .5rem .64rem .3rem;
margin-top: 2rem;
overflow-y: auto;box-sizing: border-box;
}
.popBox .clousx {
position: absolute;
z-index: 20000;
width: 1rem;
height: 0.84rem;
background: url(../images/index/close-icon.png) no-repeat center center;
background-size: 0.32rem 0.32rem;
display: inline-block;
right: 0;
top: 0;
}
.popBox .p-box {
position: relative;
height: 7rem;
overflow-y: auto;
}

JS弹窗遮罩 POP的更多相关文章

  1. js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果

    1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.a ...

  2. jQuery 小特效【文本框折叠隐藏,展开显示】【下拉菜单】【颜色渐变】【弹窗+遮罩】

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...

  3. js弹窗 js弹出DIV,并使整个页面背景变暗

    1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: # ...

  4. easyui 中iframe嵌套页面,提示弹窗遮罩的解决方法,parent.$.messager.alert和parent.$.messager.confirm

    项目中用到easyui 布局,用到north,west,center三个区域,且在center中间区域嵌入iframe标签.在主内容区做一些小提示弹窗(例如删除前的弹窗提示确认)时,会遇到遮罩问题,由 ...

  5. cefsharp重写默认js弹窗(alert/confirm/prompt)

    1.设置js弹窗控制器 webView.JsDialogHandler = this;  //js弹窗控制 this表示本类对象,所以本类要实现IJsDialogHandler接口 2.实现IJsDi ...

  6. js弹窗

    常用人JS弹窗,lhgDialog 4.20

  7. js弹窗登录效果(源码)--web前端

    1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  8. 一行js弹窗代码就能设计漂亮的弹窗广告

    接到一个设计需求,要求xmyanke在网站右侧挂一个弹窗广告宣传最近的活动,找了半天都没看到合适的,自己鼓捣了一行js弹窗代码就能设计漂亮的弹窗广告,来瞧一下,欢迎拍砖提意见,js弹窗广告代码如下: ...

  9. (转)js弹窗&返回值(window.open方式)

    本文转载自:http://hi.baidu.com/z57354658/item/5d5e26b8e9f42fa7ebba93d4 js弹窗&返回值(window.open方式) test.h ...

  10. js中push(),pop(),unshift(),shift()的用法

    js中push(),pop(),unshift(),shift()的用法小结   1.push().pop()和unshift().shift() 这两组同为对数组的操作,并且会改变数组的本身的长度及 ...

随机推荐

  1. 关于Qt的QPixmap中不支持jpg文件格式的问题

    问题 Qt部分版本存在不支持jpg,JPEG等图像格式的问题 qDebug()<<QImageWriter::supportedImageFormats(); 这行代码可以查看所支持的图像 ...

  2. OpenLooKeng

    一.登录注册 网址为:https://tryme.openlookeng.io/,进入该网址后可以看到以下界面: 可以选择左边的GitHub或者右边的Gitee进行登录,如果没有账号需要注册一个账号进 ...

  3. Java面试多线程/JUC等知识

    2021年6月30日完成此部分内容整理

  4. 解读JVM级别本地缓存Caffeine青出于蓝的要诀 —— 缘何会更强、如何去上手

    大家好,又见面了. 本文是笔者作为掘金技术社区签约作者的身份输出的缓存专栏系列内容,将会通过系列专题,讲清楚缓存的方方面面.如果感兴趣,欢迎关注以获取后续更新. 在前面的几篇文章中,我们一起聊了下本地 ...

  5. 「笔记」某移动SRE运维体系交流

    痛点 传统竖井式IT架构(封闭.隔离.非标.难运维) X86 服务器硬件稳定性不足 开源软件可靠性不足,且不可控 出了故障,被动救火救不完 转型 由此催生了转型升级的需求: 运维智能(SRE)的转型 ...

  6. uniapp微信小程序返回上一页并刷新数据

    根据要求:详情页返回列表页时,要刷新列表页的数据,操作如下 @click="goBack" goBack{ let pages = getCurrentPages(); // 当前 ...

  7. css images图片铺满 不变型 以及头像裁剪 属性

    一,图片的引入 background:url(img_flwr.gif); background-repeat:no-repeat; //平铺 二,图片的大小不不变形 background-size: ...

  8. JavaScript:操作符:逗号运算符

    逗号运算符,是极少见的运算符,我们看一下代码理解一下逗号运算符的功能: 先说结论,逗号运算符的优先级非常低,比赋值运算符=还要低: 同时,逗号隔开的几个表达式,都会各自进行计算,但是整体表达式只会返回 ...

  9. CH432,CH438,CH9434串口扩展芯片常见问题

    目前WCH有三款串口扩展芯片CH432,CH438以及CH9434. 型号 CH432 CH438 CH9434 扩展串口数量 2 8 4 通讯接口 并口/SPI(具体需要看芯片封装) 并口 SPI ...

  10. 封装 avm 组件经验分享

    avm.js 是一个跨端开发框架,AVM(Application-View-Model)前端组件化开发模式基于标准Web Components组件化思想,提供包含虚拟DOM和Runtime的编程框架a ...