JS实现当前页弹出窗口，且页面变灰不可操作
使用JS在当前页面在div中加载弹出窗口，并让当前页面变灰不可操作。
加载弹出窗口的div需将宽高设置成整个页面的大小，以覆盖当前页面的内容。
opacity：0.6； 页面可见度设置为0.6（1为完全不可见）。
z-index: 1024； 设置元素堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。并且只能在定位元素上奏效（例如 position:absolute;）
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS实现弹出窗口，页面变灰不可操作</title>
<script src="../js/jquery.js"></script>
<style type="text/css">
.opacity_bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #000;
opacity: 0.6;
margin: auto;
z-index: 1024;
display: none;
}
#dialog {
position: absolute;
top: 30%;
left: 40%;
z-index: 1025;
}
</style>
<script type="text/javascript">
function alertWin(){
$(".opacity_bg").show(); // 显示背景层,覆盖当前页面内容
$("#dialog").load("../jsp/alert.html"); // 加载弹出页
}
function iclose(){
$(".opacity_bg").hide(); // 隐藏背景层
$("#dialog").empty().hide(); // 清除弹出页
}
</script>
</head>
<body>
<div>
<div class="opacity_bg"></div>
<div id="dialog"></div>
<button onclick="alertWin();">弹出窗口</button>
</div>
</body>
</html>
alert.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<h1 style="color:#fff;">弹出的子页面</h1>
<button onclick="iclose();">点击关闭</button>
</div>
</body>
</html>
JS实现当前页弹出窗口，且页面变灰不可操作的更多相关文章
- 2、弹出窗口 Alert
1.只是弹出框 /* --- page1.html ---*/ <ion-navbar *navbar> <ion-title>Tab 1</ion-title> ...
- fancybox 关闭弹出窗口 parent.$.fancybox.close(); 无反应 fancybox 关闭弹出窗口父页面自动刷新,弹出子窗口前后事件
当我们在父页面使用 fancybox 弹出窗口后,如果想自己手动关闭,则可以 function Cancel() { parent.$.fancybox.close(); } 如果关闭没有反应,最好看 ...
- js window.open()弹出窗口参数说明及居中设置
window.open()可以弹出一个新的窗口,并且通过参数控制窗口的各项属性. 最基本的弹出窗口代码 window.open('httP://codeo.cn/'); window.open()各参 ...
- js实现弹出窗口、页面变成灰色并不可操作的例子
function show() //显示隐藏层和弹出层 { var hideobj=document.getElementById("hidebg"); hidebg.style. ...
- Jbox 弹出窗口 子页面操作完成后关闭 父页面刷新
父页面js //父页面js <script> var isFreshFlag = '1'; //添加会议活动 function addMeetingAct(){ var attendVip ...
- JS编写类似弹出窗口样式显示层
JSp中增加div <!-- 提交变更申请 --> <div id="changeWindow" class="easyui-window" ...
- ASP.NEt ajax 弹出窗口在页面无法关闭
<meta http-equiv="X-UA-Compatible" content="IE=9" /> 今天又有客戶投訴公司的網頁有問題. ...
- 关于js中alert弹出窗口换行！
请用"\n" 如果这个不可以的话就是"\\n" 比如: <script type="text/javascript"> al ...
- web页面弹出窗口代码大全
//-----------按钮提示框----------// <input type="button" name="btn2" id="btn2 ...
随机推荐
- SVN更新报错问题（Please execute the 'Cleanup' command）
SVN更新报错问题(Please execute the 'Cleanup' command) https://segmentfault.com/a/1190000012571289 svn: E20 ...
- CSS3 GENERATOR可以同时为一个元素完成border-radius、box-shadow、gradient和opacity多项属性的设置
CSS3 GENERATOR可以同时为一个元素完成border-radius.box-shadow.gradient和opacity多项属性的设置 CSS3 GENERATOR 彩蛋爆料直击现场 CS ...
- 浅议Delphi中的Windows API调用（举的两个例子分别是String和API，都不错，挺具有代表性）
浅议Delphi中的Windows API调用http://tech.163.com/school • 2005-08-15 10:57:41 • 来源: 天极网为了能在Windows下快速开发应用程 ...
- coci2018 题解
plahte 给定一些矩形和一些有颜色的点,求每个矩形上有多少种颜色的点,保证矩形只有包含和不相交两种关系,规模 \(10^5\). 把每个矩形看成一个点,用扫描线建出森林,同时也顺便处理点. 然后做 ...
- windows service 之访问权限（有NetworkService和LocalSystem的区分）
最近写了一个关于从局域网的算机上下载文件的winodws service,最初认为应该没什么大的问题.通过本地的调试也没发现问题.但是当我把程序发布后发现服务报错“访问路径被拒绝”,我的第一感觉,肯定 ...
- SYN4201型 同步分频钟
SYN4201型 同步分频钟 产品概述 SYN4201型同步分频钟是由西安同步电子科技有限公司精心设计.自行研发生产的一款高精度分频时钟,对输入的8路10MHz正弦信号分别进行同步分频处理,相应的输出 ...
- php.ini Xdebug配置
在此记录: xdebug.profiler_output_dir="H:\install\phpStudy\tmp\xdebug"xdebug.trace_output_dir=& ...
- 浅入深出Vue：数据渲染
今天来正式开始 vue的学习,首当其冲的当然是数据的渲染.毕竟数据就是拿来看的,看看如果使用 vue来展示数据. 为什么渲染 俗话说 "人靠衣装马靠鞍", 那咱们的代码就是得靠 U ...
- Android短视频中如何实现720P磨皮美颜录制？
视频中磨皮.美颜功能已成为刚需,那么如何在Android短视频中实现720P磨皮美颜录制?本篇文章中,网易云信资深开发工程师将向大家介绍具体的操作方法. 相关阅读推荐 <短视频技术详解:Andr ...
- sql server编写简洁四则运算表达式脚本实现计算批次功能（C#等其它编程语言也能直接用此通用表达式）
问题: 在数据库编程开发中,有时会遇到数据量比较大的情况,如果直接大批量进行添加数据.修改数据.删除数据,就会是比较大的事务,事务日志也比较大,耗时久的话会对正常操作造成一定的阻塞.虽不至于达到删库跑 ...