首页
所有分类
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 相关文章推荐
JavaScript.Encode手动解码技巧
Jul 14 Javascript
json数据与字符串的相互转化示例
Sep 18 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
JS实现纵向轮播图（初级版）
Jan 18 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 Javascript
使用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
capture(1) Apache(17) tabBar(1) Navigator(1) Flutter(2) Hudi(1) uniapp(4) element-china-area-data(1) self(1) 数据重复(1)
You might like
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
珊瑚虫IP库浅析
2007/02/15 PHP
PHP 面向对象程序设计（oop）学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
无语，javascript居然支持中文(unicode)编程！
2007/04/12 Javascript
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
JavaScript运动框架 解决速度正负取整问题（一）
2017/05/17 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
JavaScript模块详解
2017/12/18 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
django2.0扩展用户字段示例
2019/02/13 Python
Python实现元素等待代码实例
2019/11/11 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
python raise的基本使用
2020/09/10 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
YOINS官网：时尚女装网上购物
2017/03/17 全球购物
人力资源专业推荐信
2013/11/29 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书