首页
所有分类
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源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
转义字符（\）对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
jQuery选择器简明总结（含用法实例,一目了然）
Apr 25 Javascript
javascript引用类型指针的工作方式
Apr 13 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
原生javascript实现解析XML文档与字符串
Mar 01 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 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
修复(2) YB235(1) 东方红(1) PL-365(1) 德生(17) YB217(1) 海燕B411(1) TECSUN(1) 再生机(1) 1 Tube Radio(1)
You might like
PHP 第一节 php简介
2012/04/28 PHP
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
php中使用GD库做验证码
2016/03/31 PHP
微信支付扫码支付php版
2016/07/22 PHP
DEFER怎么用？
2006/07/01 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
node网页分段渲染详解
2016/09/05 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
Python中的日期时间处理详解
2016/11/17 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
Python列表元素常见操作简单示例
2019/10/25 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
html5 标签
2009/07/16 HTML / CSS
Chicco婴儿用品美国官网：汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
房屋转让协议书范本
2014/04/11 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
小学生学习保证书
2015/02/26 职场文书
王亚平太空授课观后感
2015/06/12 职场文书
Redis读写分离搭建的完整步骤
2021/09/14 Redis
Nginx缓存设置案例详解
2021/09/15 Servers