首页
所有分类
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 相关文章推荐
用js实现控制内容的向上向下滚动效果
Jun 26 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
JSON与XML的区别对比及案例应用
Nov 11 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
JavaScript严格模式详解
Jan 16 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
使用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
ipv6(1) 弱口令(1) 连接数(1) PV(1) 线程(1) 进程假死(1) 访问日志(2) UV(1) jenkins(1) 内存(1)
You might like
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
vue elementUI 表单校验的实现代码（多层嵌套）
2019/11/06 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
Flask-Mail用法实例分析
2018/07/21 Python
Django实现基于类的分页功能
2019/10/31 Python
Python PyQt5整理介绍
2020/04/01 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
阿里健康官方海外旗舰店：阿里健康国际自营
2017/11/24 全球购物
英国Office鞋店德国网站：在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
error和exception有什么区别
2012/10/02 面试题
市场营销专业个人求职信范文
2013/12/14 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
关于青春的演讲稿
2014/05/05 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
毕业生应聘求职信
2014/07/10 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
PHP中多字节字符串操作实例详解
2021/08/23 PHP