首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码

Posted in Javascript onFebruary 10, 2014 
<html>
<head>
<title>网页特效-窗口特效-弹出窗口后网页背景变暗的效果</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
.black_overlay{display:none;position:absolute;top:0%;left:0%;width:100%;height:100%;background-color:black;z-index:1001;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);}
.white_content{display:none;position:absolute;top:25%;left:25%;width:50%;height:50%;padding:16px;border:3px solid orange;background-color:white;z-index:1002;overflow:auto;}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'">
点击这里打开窗口</a>
<div id="light" class="white_content">
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
Close</a>
<br>窗口内容
</div>
<div id="fade" class="black_overlay">123</div>
</body>
</html>

例二：
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
    <script language="javascript" type="text/javascript">
        function hid()
        {
        var div4=document.getElementById("div1");
        div4.style.display="block";
        div4.style.width="200px";
        div4.style.height="150px";
        div4.style.zIndex="9999";
        div4.style.top="43%";
        div4.style.left="43%";
        div4.style.position="absolute";
        var div3=document.getElementById("div2");
        div3.style.display="block";
        div3.style.width="1000px";
        div3.style.zIndex="9998";
        div3.style.position="absolute";
        div3.style.height=document.body.offsetHeight;
        div3.style.top="0px";
        div3.style.left="0px";
        }
        function vis()
        {
        var div4=document.getElementById("div1");
        div4.style.display="none";
        var div3=document.getElementById("div2");
        div3.style.display="none";
        div3.style.width="0px";
        div3.style.height="0px";
        div4.innerHTML="<a onclick='vis()' style='display: block' id='text'>点击关闭</a><br /><br /><input name='TextBox2' type='text' id='TextBox2' /><br /><input id='Button3' type='button' value='button' onclick='return Button3_onclick()' />";
        }
    </script>
</head>
<body style="width:100%; height:100%">
<div align="center">
  <table width="768" border="0" cellpadding="0" cellspacing="0">
    <!--DWLayoutTable-->
    <tr>
      <td width="768" height="403">    <form id="form1" runat="server">
    <a onclick="hid()">点击显示</a><br />
            <div style="color: white; background-color: green; display: none;" id="div1">
                <a onclick="vis()" style="display: block" id="text">点击关闭</a><br />
                    <br />
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
                    <input id="Button3" type="button" value="button" onclick="return Button3_onclick()" /></div>
            <div style="filter:alpha(opacity=70);width: 1px; height: 8px; background-color: #cccccc; left: 0px; position: absolute; top: 0px; z-index: 9998; display: none;" id="div2">
            </div>
    </form></td>
    </tr>
  </table>
</div>
</body>
</html>

例三：
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
     <title>点击弹出层效果</title>
     <style>
     * {margin:0;}
     body {font-size:12px;}
     #container div{margin-top:5px;}
     #select_city h3{float:left;}
     #main_city,#all_province {clear:both;}
     #main_city div,#all_province div{width:600px;clear:left;}
     #main_city h4,#all_province h4{float:left;display:inline;font-size:16px;}
     #main_city div span,#all_province div span{margin:0 10px;cursor:pointer;font-size:12px;}
     #float_lay{width:200px;height:120px;border:1px #d1d1d1 solid;position:absolute;background:#fff;z-index:999;display:none;}
     </style>
     <script type="text/javascript">
     //弹出层
     function openLayer(objId,conId){
      var arrayPageSize   = getPageSize();//调用getPageSize()函数
      var arrayPageScroll = getPageScroll();//调用getPageScroll()函数
      if (!document.getElementById("popupAddr")){      //创建弹出内容层
       var popupDiv = document.createElement("div");
       //给这个元素设置属性与样式
       popupDiv.setAttribute("id","popupAddr")
       popupDiv.style.position = "absolute";
       popupDiv.style.border = "1px solid #ccc";
       popupDiv.style.background = "#fff";
       popupDiv.style.zIndex = 99;
      
      //创建弹出背景层
       var bodyBack = document.createElement("div");
       bodyBack.setAttribute("id","bodybg")
       bodyBack.style.position = "absolute";
       bodyBack.style.width = "100%";
       bodyBack.style.height = (arrayPageSize[1] + 35 + 'px');
       bodyBack.style.zIndex = 98;
       bodyBack.style.top = 0;
       bodyBack.style.left = 0;
       bodyBack.style.filter = "alpha(opacity=50)";
       bodyBack.style.opacity = 0.5;
       bodyBack.style.background = "#ddf";
      //实现弹出(插入到目标元素之后)
       var mybody = document.getElementById(objId);
       insertAfter(popupDiv,mybody);//执行函数insertAfter()
       insertAfter(bodyBack,mybody);//执行函数insertAfter()
      }
     //显示背景层
      document.getElementById("bodybg").style.display = "";
     //显示内容层
      var popObj=document.getElementById("popupAddr")
      popObj.innerHTML = document.getElementById(conId).innerHTML;
      popObj.style.display = "";
     //让弹出层在页面中垂直左右居中(统一)
     // popObj.style.width = "600px";
     // popObj.style.height = "400px";
     // popObj.style.top = arrayPageScroll[1] + (arrayPageSize[3] - 35 - 400) / 2 + 'px';
     // popObj.style.left = (arrayPageSize[0] - 20 - 600) / 2 + 'px';
     //让弹出层在页面中垂直左右居中(个性)
      var arrayConSize=getConSize(conId)
      popObj.style.top = arrayPageScroll[1] + (arrayPageSize[3] - arrayConSize[1]) / 2-50 + 'px';
      popObj.style.left = (arrayPageSize[0] - arrayConSize[0]) / 2 -30 + 'px';
     }
     //获取内容层内容原始尺寸
     function getConSize(conId){
     var conObj=document.getElementById(conId)
     conObj.style.position = "absolute";
     conObj.style.left=-1000+"px";
     conObj.style.display="";
     var arrayConSize=[conObj.offsetWidth,conObj.offsetHeight]
     conObj.style.display="none";
     return arrayConSize;
     }
     function insertAfter(newElement,targetElement){//插入
      var parent = targetElement.parentNode;
      if(parent.lastChild == targetElement){
       parent.appendChild(newElement);
      }
      else{
       parent.insertBefore(newElement,targetElement.nextSibling);
      }
     }
     //获取滚动条的高度
     function getPageScroll(){
      var yScroll;
      if (self.pageYOffset) {
       yScroll = self.pageYOffset;
      } else if (document.documentElement && document.documentElement.scrollTop){
       yScroll = document.documentElement.scrollTop;
      } else if (document.body) {
       yScroll = document.body.scrollTop;
      }
      arrayPageScroll = new Array('',yScroll)
      return arrayPageScroll;
     }
     //获取页面实际大小
     function getPageSize(){
      var xScroll,yScroll;
      if (window.innerHeight && window.scrollMaxY){
       xScroll = document.body.scrollWidth;
       yScroll = window.innerHeight + window.scrollMaxY;
      } else if (document.body.scrollHeight > document.body.offsetHeight){
       sScroll = document.body.scrollWidth;
       yScroll = document.body.scrollHeight;
      } else {
       xScroll = document.body.offsetWidth;
       yScroll = document.body.offsetHeight;
      }
      var windowWidth,windowHeight;
      //var pageHeight,pageWidth;
      if (self.innerHeight) {
       windowWidth = self.innerWidth;
       windowHeight = self.innerHeight;
      } else if (document.documentElement && document.documentElement.clientHeight) {
       windowWidth = document.documentElement.clientWidth;
       windowHeight = document.documentElement.clientHeight;
      } else if (document.body) {
       windowWidth = document.body.clientWidth;
       windowHeight = document.body.clientHeight;
      }
      var pageWidth,pageHeight
      if(yScroll < windowHeight){
       pageHeight = windowHeight;
      } else {
       pageHeight = yScroll;
      }
      if(xScroll < windowWidth) {
       pageWidth = windowWidth;
      } else {
       pageWidth = xScroll;
      }
      arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
      return arrayPageSize;
     }
     //关闭弹出层
     function closeLayer(){
      document.getElementById("popupAddr").style.display = "none";
      document.getElementById("bodybg").style.display = "none";
      return false;
     }
     </script>
     </head>
     <body>
     <input name="Input" id="test" value="风格设置" type="button" onclick="openLayer('test','test_con')" />
     <!--第一个弹出层的内容-->
     <div id="test_con" style="display:none" title="包含弹出层的内容的容器">
     <div id="tab">
     <div id="tabtop">
     <div id="tabtop-L"><strong>风格设置</strong></div>   
     <div id="tabtop-R" onclick="closeLayer()"><strong>关闭</strong></div>
     </div>
     <div id="tabcontent">此处显示内容</div>
     </div>
     </div>
     <br>
     <br>
     <br>
     <input name="Input" id="test2" value="风格提示" type="button" onclick="openLayer('test2','test_con2')" />
     <!--第二个弹出层的内容-->
     <div id="test_con2" style="display:none" title="包含弹出层的内容的容器">
     <div id="tab2">
     <div id="tabtop2">
     <div id="tabtop-L2"><strong style="color:blue">设置提示</strong></div>   
     <div id="tabtop-R2" onclick="closeLayer()"><strong style="color:red">关闭</strong></div>
     </div>
     <div id="tabcontent2" style="color:#dff;background:#000">
     <p>此处显示提示内容"
     <p>提示1
     <p>提示2
     </div>
     </div>
     </div>
     <br>
     1<br>
     <br>
     <input name="Input" id="test3" value="风格演示" type="button" onclick="openLayer('test3','test_con3')" />
     <!--第三个弹出层的内容-->
     <div id="test_con3" style="display:none" title="包含弹出层的内容的容器">
     <div id="tab3" style="width:300px;height:180px;background:#fee">
     <div id="tabtop3">
     <div id="tabtop-L3"><strong style="color:red;font-size:20px">风格演示</strong></div>   
     <div id="tabtop-R3" onclick="closeLayer()"><strong>关闭</strong></div>
     </div>
     <div id="tabcontent3">此处显示内容</div>
     </div>
     </div>
     </body>
     </html>

点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码

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

Javascript 相关文章推荐
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
iframe实用操作锦集
Apr 22 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
使用js实现关闭js弹出层的窗口
Feb 10 #Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 #Javascript
js实现省市联动效果的简单实例
Feb 10 #Javascript
js+div实现图片滚动效果代码
Feb 10 #Javascript
javascript实现数字验证码的简单实例
Feb 10 #Javascript
javascript实现数字+字母验证码的简单实例
Feb 10 #Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 #Javascript
KDKA(1) 中波(3) Harman Kardon(1) 调频(4) 短波(8) 收音机(62) 电台频率(32) 长波(3) 立体声(1) 保养(1)
You might like
PHP下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
php图片上传存储源码并且可以预览
2011/08/26 PHP
20个PHP常用类库小结
2011/09/11 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
php基于 swoole 实现的异步处理任务功能示例
2019/08/13 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
Vue.js分页组件实现：diVuePagination的使用详解
2018/01/10 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
python 魔法函数实例及解析
2019/09/25 Python
python plotly画柱状图代码实例
2019/12/13 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
python db类用法说明
2020/07/07 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
马来西亚领先的在线礼品店：Giftr
2018/08/23 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物：FirstCry.ae
2021/02/22 全球购物
高级护理专业毕业生推荐信
2013/12/25 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
农业项目合作意向书
2015/05/08 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL