js实现弹出窗口、页面变成灰色并不可操作的例子分享


Posted in Javascript onMay 10, 2014

如果你还不会,可以看看下面这个简单的例子。

<html>
<head>
<title>弹出一个窗口后,后面的层不可操作</title>
<script>
function show()  //显示隐藏层和弹出层
{
   var hideobj=document.getElementById("hidebg");
   hidebg.style.display="block";  //显示隐藏层
   hidebg.style.height=document.body.clientHeight+"px";  //设置隐藏层的高度为当前页面高度
   document.getElementById("hidebox").style.display="block";  //显示弹出层
}
function hide()  //去除隐藏层和弹出层
{
   document.getElementById("hidebg").style.display="none";
   document.getElementById("hidebox").style.display="none";
}
</script>
<style>
   body { margin:0px;padding:0px;text-align: center;}
   #hidebg { position:absolute;left:0px;top:0px;
      background-color:#000;
      width:100%;  /*宽度设置为100%,这样才能使隐藏背景层覆盖原页面*/
      filter:alpha(opacity=60);  /*设置透明度为60%*/
      opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
      display:none; /* https://3water.com */
      z-Index:2;}
   #hidebox { position:absolute;width:400px;height:300px;top:200px;left:30%;background-color:#fff;display:none;cursor:pointer;z-Index:3;}
   #content { text-align:center;cursor:pointer;z-Index:1;}
</style>
</head>
<body>
<div id="hidebg"></div>
<div id="hidebox" onClick="hide();">点击关闭</div>
<div id="content" onClick="show();">点击试试</div>
</body>
</html>

 
Javascript 相关文章推荐
js下获取div中的数据的原理分析
Apr 07 Javascript
html a标签-超链接中confirm方法使用介绍
Jan 04 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
运算符&amp;&amp;的三个不同层次
Apr 07 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
vue实现页面加载动画效果
Sep 19 Javascript
node的process以及child_process模块学习笔记
Mar 06 Javascript
Vue实现简单计算器
Jan 20 Vue.js
动态规划之使用备忘录来改进Javascript函数
Apr 07 Javascript
多引号嵌套的变量命名的问题
May 09 #Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 #Javascript
javascript的数组和常用函数详解
May 09 #Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 #Javascript
实例讲解JS中数组Array的操作方法
May 09 #Javascript
一个JavaScript的求爱小特效
May 09 #Javascript
js中的setInterval和setTimeout使用实例
May 09 #Javascript
You might like
用PHP实现ODBC数据分页显示一例
2006/10/09 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
express框架下使用session的方法
2019/07/31 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
python读取xlsx的方法
2018/12/25 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
庆祝教师节标语
2014/10/09 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书