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. Django路由层之路由分发 名称空间 虚拟环境 视图层之三板斧 JsonRsponse对象 request对象获取文件 FBV与CBV CBV源码剖析 模板层

    目录 路由层之路由分发 路由层之名称空间 方式1:名称空间 方式2:别名不冲突即可 虚拟环境 pycharm创建虚拟环境 命令行形式创建虚拟环境 视图层之三板斧 HttpRsponse render ...

  2. dotTrace工具

    1.dotTrace简介: (1)dotTrace是一个包含了可用于.NET应用程序的性能分析器(dotTrace Performance)和内存分析器(dotTrace Memory)的套件: (2 ...

  3. 一阶段目标检测网络-RetinaNet 详解

    摘要 1,引言 2,相关工作 3,网络架构 3.1,Backbone 3.2,Neck 3.3,Head 4,Focal Loss 4.1,Cross Entropy 4.2,Balanced Cro ...

  4. CH9434-MCU代码移植,芯片使用详细说明(附Linux开发资料链接)

    简介 CH9434是一款SPI转四串口转接芯片,提供四组全双工的9线异步串口,用于单片机/嵌入式/安卓系统扩展异步串口.提供25路GPIO,以及支持RS485收发控制引脚TNOW.本篇基于STM32F ...

  5. VSCode运行C/C++配置

    将MinGw安装目录下的 1.安装 VSCode 2.安装 MinGW 链接:点击跳转 3.MinGW 内安装两个模块 1.右键 Mark for Installation 勾选 (此处已安装好,所以 ...

  6. Asp-Net-Core-管道VS过滤器

    title: Asp.Net Core底层源码剖析(二)过滤器 date: 2022-09-18 10:41:57 categories: 后端 tags: - .NET 正文 Asp.Net Cor ...

  7. 算法之Floyd-Warshall算法【c++】【图论】【最短路】

    我们作为刚学图论的小蒟蒻,先接触到的算法一定是图上最短路径算法.而最短路算法中最简单的当属Floyd-Warshall算法.下面是一些基本介绍: ​该算法可以计算图上任意两点间的最短路径 时间复杂度: ...

  8. ActiveMQ 常见集群模式

    Master Slave 架构模式 这种模式是基于文件共享锁的高可用集群,个人理解其实是一种 Failover 模式,可以是一主一从,也可以是一主两从. 本文使用 Docker 搭建一个主从模式的 A ...

  9. vue中使用echarts来绘制中国地图,NuxtJS制作疫情地图,内有详细注释,我就懒得解释了,vue cli制作疫情地图 代码略有不同哦~~~

    我的代码自我感觉----注释一向十分详细,就不用过多解释都是什么了~~ 因为最近疫情期间在家实在是没事干,想找点事,就练手了个小demo 首先上 NuxtJs版本代码,这里面 export defau ...

  10. vue修改内容点击显示隐藏内容不自动刷新问题

    今天遇到一个在card组件中点击显示隐藏的问题,修改了动态绑定的值,但是组件内容没有刷新,但是偶而其他元素修改导致页面动态刷新又刷新了,就猜想修改这个数组中一个对象的值并没有引起vue的动态刷新 解决 ...