首页
所有分类
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的10个怪癖和秘密分享
Aug 28 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
数据分析软件之FineReport教程：[5]参数界面JS（全）
Aug 13 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
jQuery实现的简单拖拽功能示例
Sep 13 Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
koa-router源码学习小结
Sep 07 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
js正则表达式简单校验方法
Jan 03 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
Flask Web(1) OpenAI baselines(1) BeautifulSoup4(2) cv2(1) ElementTree(1) 面向接口(1) exec(1) tfx(1) MyBatis(5) OpenGL(1)
You might like
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
jquery表单验证插件（jquery.validate.js）的3种使用方式
2015/03/28 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
在javascript中，null＞=0 为真，null==0却为假，null的值详解
2017/02/22 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
python解析xml文件操作实例
2014/10/05 Python
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
简单了解Python3里的一些新特性
2019/07/13 Python
python获取Pandas列名的几种方法
2019/08/07 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
Java面试题：说出如下代码的执行结果
2015/10/30 面试题
生产班组长岗位职责
2014/01/05 职场文书
车贷收入证明范本
2014/01/09 职场文书
保护地球的标语
2014/06/17 职场文书
统计专业自荐书
2014/07/06 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏