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. JavaScript入门⑥-WEB浏览器API

    JavaScript入门系列目录 JavaScript入门①-基础知识筑基 JavaScript入门②-函数(1)基础{浅出} JavaScript入门③-函数(2)原理{深入}执行上下文 JavaS ...

  2. Kafka技术专题之「性能调优篇」消息队列服务端出现内存溢出OOM以及相关性能调优实战分析

    内存问题 本篇文章介绍Kafka处理大文件出现内存溢出 java.lang.OutOfMemoryError: Direct buffer memory,主要内容包括基础应用.实用技巧.原理机制等方面 ...

  3. 《MySQL必知必会》之事务、用户权限、数据库维护和性能

    第二十六章 管理事务处理 本章介绍什么是事务处理以及如何利用COMMIT和ROLLBACK语句来管理事务处理 事务处理 并非所有数据库引擎都支持事务处理 常用的InnoDB支持 事务处理可以用来维护数 ...

  4. python 实现DES加解密

    from pyDes import * import base64 class Des3(object): def __init__(self, key, iv): # 这里密钥key长度必须为16/ ...

  5. week_Last

    Andrew Ng 机器学习笔记 总结! 注:等下用xmind做一个树状图! 来回忆知识! 所以...树状图待补.... 最后,谢谢吴恩达老师!! 感谢吴恩达老师的无私付出!!

  6. python Flask 操作数据库

    Flask数据库 转载:Flask数据库 - 苦行僧95 - 博客园 (cnblogs.com) Flask-SQLAlchemy Flask-SQLAlchemy是在Flask中操作关系型数据库的拓 ...

  7. Spring之Bean注入Spring容器中的方式

    向spring容器中加入bean有以下方式: 通过<Bean>标签 @Configuration + @Bean @Component + 组件扫描 @Import导入[见 Spring注 ...

  8. Python二维码扫描

    原文链接:https://blog.easyctf.cn/Moxin/59365.html 模块准备 1.pyzbar pip install pyzbar 2.PIL 注意:PIL只支持Python ...

  9. PKUSC2022 润摆寄

    Day 0 模拟赛的题目竟是 寄 摆 润!预示着我的 PKUSC. Day 1 猜中主角(指九条可怜)原来都是芳文厨 看错时间以为考 \(5h\),于是告诉自己 优势在我可以慢慢做. T1 很显然的 ...

  10. .NET 6配置EF Core数据库链接字符串

    appsetting.json { "Logging": { "LogLevel": { "Default": "Informat ...