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";

    }
 #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:;}

    #hidebox { position:absolute;width:400px;height:300px;top:200px;left:30%;background-color:#fff;display:none;cursor:pointer;z-Index:;}

hidebg:隐藏背景层div的id

hidebox:消息框div的id

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

  1. [转]js来弹出窗口的详细说明

    1.警告对话框 <script> alert("警告文字") </script> 2.确认对话框 <script> confirm(" ...

  2. js实现弹出窗口+遮罩层+tab切换

    [功能1]点击约谈按钮,弹出对话框和遮罩层(自己的叫法 专业叫法没有查) [部分重点代码] [下面的方法] (1)获取系统时间如何实现(2)点击如何实现弹出窗口和遮罩层 $(".date_n ...

  3. jquery-通过js编写弹出窗口

    本文转载 本文主要是通过js动态控制div的高度,css控制浮动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  4. 原生JS实现弹出窗口的拖拽

    上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件.库比如hammer可以使用,效率也非常好.但我觉得还是有必要了解一下原生JS的实现思路及方式,如下: 思 ...

  5. JS实现当前页弹出窗口,且页面变灰不可操作

    使用JS在当前页面在div中加载弹出窗口,并让当前页面变灰不可操作. 加载弹出窗口的div需将宽高设置成整个页面的大小,以覆盖当前页面的内容. opacity:0.6: 页面可见度设置为0.6(1为完 ...

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

    http://blog.csdn.net/nsdnresponsibility/article/details/51282797 问题如题: 这里我们在父页面定义一个全局的变量来标识是否需要刷新父页面 ...

  7. 弹出窗口zDialog的使用

    因为没有元素可以显示到Frameset上面去,所以重新定义了,一个index.htm,对其的操作是: Index.htm    <script language="javascript ...

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

    fancybox弹出窗口右上角会自带一个关闭窗口,并且点击遮罩层也会关闭fancybox 有时我们不需要这样进行关闭,隐藏关闭窗口,并且遮罩层不可点击 在弹出窗口页面加一链接进行关闭使用parent. ...

  9. Response.write()弹出窗口的问题!

    今天偶然发现在.NET中使用Javascript语句弹出窗口时发现一个小小的问题! 例子如下: 1: Response.Write ("<script languge=javascri ...

随机推荐

  1. 【LeetCode练习题】Reverse Linked List II

    Reverse Linked List II Reverse a linked list from position m to n. Do it in-place and in one-pass. F ...

  2. GroundworkCSS ♥ Tables

    微信公众平台开发(41)一键关注微信公众平台账号 - 方倍工作室 - 博客园 微信公众平台开发(41)一键关注微信公众平台账号 GroundworkCSS ♥ Tables Example Layou ...

  3. tsm ANS0326E问题处理

    备份tsm备份oracle 报错 ANS0326E This node has exceeded its maximum number of mount points. 查看所有节点详细信息 q no ...

  4. optimizer for eclipse--Eclipse优化,让你的Eclipse快来飞!

    官方网站:http://zeroturnaround.com/free/optimizer-for-eclipse/ infoq网址:http://www.infoq.com/cn/news/2015 ...

  5. golang之interface

    一.概述 接口类型是对 "其他类型行为" 的抽象和概况:因为接口类型不会和特定的实现细节绑定在一起:很多面向对象都有类似接口概念,但Golang语言中interface的独特之处在 ...

  6. js方法在对象中的状态

    在C#中,只有对象的字段存储在堆中,而方法则存储在一个方法表中.当实例化多个对象时,为字段分配了内存空间,而方法都指向一个方法表中的同一个方法. 如 而在JS中,字段和方法都属于值类型,都存储在堆中. ...

  7. javascript模式——Facade

    Facade模式为许多代码提供一个方便的接口,不现实代码实现的复杂性,这样,使用者只需要关心他的使用接口就可以使用. 下面来看一段Facade模式的运用,绑定事件在浏览器之间是不一样的,利用Facad ...

  8. Android 简单的代码混淆

    Android的代码混淆是开发者需要了解的相关知识,它能够防止android应用程序的反编译.因为android程序多数是java语言开发的,而java代码很容易被反编译,所以为了使android应用 ...

  9. android经典Demo(转载)

    一篇不错的资源博文,转载分享给大家:   1.Android团队提供的示例项目  如果不是从学习Android SDK中提供的那些样例代码开始,可能没有更好的方法来掌握在Android这个框架上开发. ...

  10. tomcat 发布webService

    <!-- tomcat发布webservice时所需jar --> <dependency> <groupId>com.sun.xml.ws</groupId ...