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 相关文章推荐
记录几个javascript有关的小细节
Apr 02 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
理解javascript对象继承
Apr 17 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 Javascript
Vue多选列表组件深入详解
Mar 02 Vue.js
多引号嵌套的变量命名的问题
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+MYSQL 出现乱码的解决方法
2008/08/08 PHP
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
PHP new static 和 new self详解
2017/02/19 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
js实现编辑div节点名称的方法
2014/12/17 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
2020/08/25 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
python友情链接检查方法
2015/07/08 Python
Python实现简单的语音识别系统
2017/12/13 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
a标签下载链接的简单实现
2016/09/13 HTML / CSS
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
浅谈Python基础之列表那些事儿
2021/05/11 Python