编程 Javascript

JS+CSS实现Div弹出窗口同时背景变暗的方法

Posted in Javascript onMarch 04, 2015

本文实例讲述了JS+CSS实现Div弹出窗口同时背景变暗的方法。分享给大家供大家参考。具体实现方法如下：

<html>

<head>

<title>JS+CSS实现的Div弹出窗口，同时背景变暗</title>

<script>   

  function    locking(){   

   document.all.ly.style.display="block";   

   document.all.ly.style.width=document.body.clientWidth;   

   document.all.ly.style.height=document.body.clientHeight;   

   document.all.Layer2.style.display='block';  

   }   

  function    Lock_CheckForm(theForm){   

   document.all.ly.style.display='none';document.all.Layer2.style.display='none';

  return   false;   

   }   

    </script>

    <style type="text/css">

<!--

.STYLE1 {font-size: 12px}

a:link {

color: #000;

text-decoration: none;

}

a:visited {

text-decoration: none;

}

a:hover {

text-decoration: none;

}

a:active {

text-decoration: none;

}

-->

</style>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

</head>

<body>

    <p align="center">

        <input type="button" value="弹出DIV" onClick="locking()" />

    </p>

    <div id="ly" style="position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;

         z-index: 2; left: 0px; display: none;">

    </div>

    <!--          浮层框架开始         -->

    <div id="Layer2" align="center" style="position: absolute; z-index: 3; left: expression((document.body.offsetWidth-540)/2); top: expression((document.body.offsetHeight-170)/10);

         background-color: #fff; display: none;" >

        <table width="540" height="300" border="0" cellpadding="0" cellspacing="0" style="border: 0    solid    #e7e3e7;

             border-collapse: collapse ;" >

            <tr>

                <td style="background-color: #73A2d6; color: #fff; padding-left: 4px; padding-top: 2px;

                     font-weight: bold; font-size: 12px;" height="10" valign="middle">

                     <div align="right"><a href=JavaScript:; class="STYLE1" onclick="Lock_CheckForm(this);">[关闭]</a>     </div></td>

            </tr>

            <tr>

                <td height="130" align="center">

<br><br><hr><p align="center"><font color=red>本特效收集于互联网，只为兴趣与学习交流，不作商业用途。来源：三水点靠木</font></p>

                </td>

            </tr>

        </table>

    </div>

    <!--  浮层框架结束-->

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

33个优秀的jQuery 教程分享(幻灯片、动画菜单)

Jul 08 Javascript

基于jQuery的弹出框插件

Mar 18 Javascript

使用javascript实现页面定时跳转总结篇

Sep 21 Javascript

jquery实现图片滚动效果的简单实例

Nov 23 Javascript

JQuery.validate在ie8下不支持的快速解决方法

May 18 Javascript

JavaScript使用Range调色及透明度实例

Sep 25 Javascript

jQuery自定义多选下拉框效果

Jun 19 jQuery

js 原生判断内容区域是否滚动到底部的实例代码

Nov 15 Javascript

在vue中封装可复用的组件方法

Mar 01 Javascript

Angularjs之ngModel中的值验证绑定方法

Sep 13 Javascript

vue实现点击按钮下载文件功能

Oct 11 Javascript

Node.js API详解之 querystring用法实例分析

Apr 29 Javascript

js实现iGoogleDivDrag模块拖动层拖动特效的方法

Mar 04 #Javascript

JavaScript中的关联数组问题

Mar 04 #Javascript

JavaScript中常见获取元素的方法汇总

Mar 04 #Javascript

深入理解JavaScript系列（17）：面向对象编程之概论详细介绍

Mar 04 #Javascript

JavaScript设置获取和设置属性的方法

Mar 04 #Javascript

深入理解JavaScript系列（50）：Function模式（下篇）

Mar 04 #Javascript

深入探讨javascript中的数据类型

Mar 04 #Javascript