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

<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; /* http://www.jb51.net */
      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>

时间： 2024-10-09 09:48:03

js实现弹出窗口、页面变成灰色并不可操作的例子的相关文章

原生JS实现弹出窗口的拖拽（直接copy可用）

上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件.库比如hammer可以使用,效率也非常好.但我觉得还是有必要了解一下原生JS的实现思路及方式,如下: 思路:拖动这个操作起始分为三个部分: 鼠标左键按下,此时才开始可以拖动: 鼠标移动,拖动开始:根据光标的移动给div相对应的纵轴.横轴的偏移: 鼠标左键松手,拖动结束,不可以再拖动了. 每一步需要做的事: 1中需要将初始化的拖动标示量置为true(可以拖动了).记录光标起始坐标和div的起始坐标 2中

js 控制弹出窗口的大小

<SCRIPT LANGUAGE=javascript> window.open ('open.html', 'newwindow','height=200, width=400, top=50%,left=50%, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no,status=no') </SCRIPT> 参数解释: LANGUAGE=javascript // 代表脚本开始 window.open

js先弹出窗口，然后N秒后跳转指定网址

在家里的一段时间里,做了网页中的一个小功能,因为实在找不到原因了,只能先用JS来先解决一下了,问题是用银行卡已经充值成功了,但一定要返回重新刷新一下才能显示出来,也就是没有同步显示,当然了,如果用银行卡充值成功,然后停顿四五秒后再返回,则显示新的余额,所以这里涉及到一个异步的问题,暂用且 JS 来解决一下吧,先提示充值成功,然后停顿N秒后返回会员中心. <script> alert("充值成功"); function hello(){ window.location = &

easyui弹出窗口页面

<div id="dd"></div> function detailView() {         var url = CONTEXT_PATH+'/p/viewSource.action';                      $('#dd').dialog({             title: '数据来源信息',                 width: 600,                 height: 250,          

jquery Jbox 插件实现弹出窗口在修改的数据之后，关闭弹出窗口刷新父页面的问题

http://blog.csdn.net/nsdnresponsibility/article/details/51282797 问题如题: 这里我们在父页面定义一个全局的变量来标识是否需要刷新父页面(声明:下图中点击保存页面之后,不关闭子页面):点击1出弹出窗口: 我们的目的是:如果,用户保存过数据:在点击关闭按钮和2处所指的小X时,刷新父列表页面:若果用户没有保存过数据,关闭窗口是不刷新父列表页面. //这里是父页面(列表页面) var isFreshFlag="1";<%-

fancybox关闭弹出窗口parent.$.fancybox.close();

fancybox弹出窗口右上角会自带一个关闭窗口,并且点击遮罩层也会关闭fancybox 有时我们不需要这样进行关闭,隐藏关闭窗口,并且遮罩层不可点击 在弹出窗口页面加一链接进行关闭使用parent.$.fancybox.close();可进行对其关闭 以下为弹出页面的代码: function myclose(){ parent.$.fancybox.close(); } <a href="javascript:myclose();">关闭</a> 需要注意的一

JS弹出窗口代码大全(详细整理)

1.弹启一个全屏窗口 复制代码代码如下: <html> <body http://www.jb51.net','脚本之家','fullscreen');">; <b>www.jb51.net</b> </body> </html> 2.弹启一个被F11化后的窗口 复制代码代码如下: <html> <body 'http://www.jb51.net','脚本之家','channelmode');"

Js(Jquery)实现的弹出窗口

想实现一个弹出层,过一段时间自动消失的功能. 之前的项目中是:在页面中预先先一个<div>区域,默认隐藏或者因为没有内容不显示.当需要显示信息时,将该<div>填充上内容,并用样式显示在正确的位置上. 今天想找这么一个插件,发了这个:http://tautologistics.com/projects/jquery.modaldialog/ 还不错,可以弹出窗口手动关闭,也可定时关闭. 百度盘:http://pan.baidu.com/s/1qWruV2c 后来再进行搜索,发现了这

HTML页面弹出窗口调整代码总结

弹出跟你当前的窗口有没有菜单工具栏没有关系,你只要在页面中写一个脚本它就弹出了.比如<a href=# onclick="window.open('xxx.aspx','窗口名称','参数');">xxxxx</a> 以下列出一些弹出窗口的参数,你可自行设定,参数之间用逗号分隔 可选.字符串--列出对象表并用逗号分开.每一项都有自己的值,他们将被分开(如:"fullscreen=yes, toolbar=yes").下面是被支持的各种特性.