[转]仿lightbox提示框效果

最新推荐文章于 2017-11-14 21:09:25 发布
最新推荐文章于 2017-11-14 21:09:25 发布
阅读量571 收藏
点赞数
分类专栏： JS-3 文章标签： Opera IE 浏览器 XHTML
[b]演示地址[/b]：[url]http://www.yaohaixiao.com/code/alertbox/index.htm[/url] 
<!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>模拟ightbox提示框DEMO</title>
<style type="text/css">
<!--
*{
   margin:0;
   padding:0;
}
body{
   background-color:#FFF;
   color:#000;
   text-align:center;
   font:normal 12px Georgia, "Times New Roman", Times, serif;
}
img{
   max-width:100%;
   height:auto;
   border:0;
}
ul,dl{
   list-style-type:none;
}
.clear{
   clear:both;
   font-size:1px;
   width:1px;
   height:1px;
   visibility:hidden;
}
div,span,p,h1,h2,h3,h4,h5,h6{
   text-align:left;
}
#btnshow{
   margin-top:30px;    
}
#confirmInfo{
   position:absolute;
   width:396px;
   height:236px;
   padding:1px;
   border:1px solid #999;
   z-index:999;
   background-color:#FFF;
   left:50%;
   top:50%;
   margin:-120px 0 0 -200px;
}
#window-title{
   width:372px;
   height:14px;
   padding:5px 0 5px 24px;
   background:#0A246A url(ie-icon.gif) 4px 4px no-repeat;
   color:#FFF;
}
#window-title h2{
   float:left;
   width:200px;
   height:14px;
   overflow:hidden;
   font-size:13px;
}
#window-title a:link,
#window-title a:visited,
#window-title a:hover{
   float:right;
   margin-right:4px;
   display:blcok;
   width:16px;
   height:14px;
   color:#FFF;
   background-image:url(close.gif);
   overflow:hidden;
   font-size:14px;
   text-indent:-200px;
}
#window-title span a:active{
   background-image:url(close-act.gif);
}
#container{
   margin:0 auto;
   margin-top:1px;
   border-top:1px solid #999;
   border-bottom:1px solid #FFF;
   width:396px;
   height:174px;
   overflow:hidden;   
   background-color:#D4D0C8;
}
#container h3{
   margin-top:60px;
   height:14px;
   font-size:14px;
   text-align:center;
   padding:5px 0;
}
#container p{
   margin:0 auto;
   width:380px;
   line-height:150%;
   font-size:14px;
   height:auto;
   text-align:center;
}
#frmEnter{
     margin:0 auto;
   height:22px;
   padding:6px 5px 6px 6px;
   border-top:1px solid #999;
   width:385px;
   text-align:right;
   background-color:#D4D0C8;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
/***
函数名称：Create()
函数功能：创建提示框信息层和透明遮照效果层
实现原理：1、利用docment.createElement()方法动态创建节点，在通过
             使用appenChild()方法，给body节点动态添加节点。
          2、position:absolute--将节点的position设置为absolute,
             利用absolute的特性，position:absolute的节点的特点是
             不影响其周围节点的布局。所以我们将遮照层的position属
             性设置为absolute,这样遮照层即使覆盖了整个页面，但是
             却不影响其他节点的（正文）布局。
          3、遮照层--就是要覆盖到其他层上面，所以我们就设置了一个
             z-index:10;让它覆盖到正文之上（或者说他比较厚，把其
             的节点都包起来了）。但是我们把提示框的z-index设置为
             999从而使它在最上面显示，模拟出提示框的效果。
          4、透明--原本的遮照层是蓝色的背景，是会把它下面的正文全
             部遮住，但是我们使用了filter（IE）和 opacity属性设置
             层是透明的，以便让正文得以显示。  
          5、使用removeChilde()方法移除提示框节点。
          6、提示框居中--其实很简单，left:50%,top:50%;然后就是设置
             margin:-(提示框高/2)px 0 0 -(提示框宽/2)px;              
参数说明：无参数
返 回 值：无返回值
***/
function CreateDiv(){
       // 判断是否为Opear浏览器
     var isOpear=(navigator.userAgent.indexOf('Opera')>-1);
     // 创建透明阴影遮照效果层
       var shadow = document.createElement("id");
       // 给新创建的节点设置各个属性
       shadow.setAttribute("id","shadow"); 
       shadow.style.position="absolute";　 // 　　
       shadow.style.left="0";
       shadow.style.top="0";
       shadow.style.width="100%";
       shadow.style.height="100%";
         shadow.style.zIndex="10";
       // 如果是Opera浏览器则给shadow设置背景色和透明效果
       if(!isOpear){
           shadow.style.backgroundColor="#06C";

           if(document.all){
                   shadow.style.filter = "alpha(opacity=20)";
             }
             else{
                   shadow.style.opacity = 0.2;
             }
         }

       // 创建提示框层节点
       var obj=document.createElement("div");
       obj.setAttribute("id","confirmInfo");
       obj.style.zIndex="999";

       // 创建提示标题栏节点
       var divTitle = document.createElement("div");
       divTitle.setAttribute("id","window-title");

       // 创建标题节点
       var H2 = document.createElement("h2");
       H2.innerHTML="爱唱卡充值";
       // 创建关闭按钮节点
       var A = document.createElement("a");
       A.innerHTML="关闭窗口";
       A.setAttribute("href","#1");
       A.setAttribute("id","aClose");
       A.setAttribute("title","关闭窗口");

       // 将标题追加到标题栏
       divTitle.appendChild(H2);
       // 将关闭按钮追加到标题栏
       divTitle.appendChild(A);

       // 创建提示内容节点
       var Container = document.createElement("div");
       Container.setAttribute("id","container");

       // 创建提示正文标题节点
       var H3 = document.createElement("h3");
       H3.innerHTML="恭喜您充值成功！";
       // 创建提示正文节点
       var P = document.createElement("p");
       P.innerHTML="充值单号为：<strong id=\"txtuid\">1dfe</strong>（请您牢记，便于查询）"; 

       // 将提示标题追加到提示内容节点中
       Container.appendChild(H3);
       // 将提示正文追加到提示内容节点中
       Container.appendChild(P)

       // 创建确定表单节点
       var frmEnter = document.createElement("form");
       // 设置确定表单各个属性
       frmEnter.setAttribute("name","frmEnter");
       frmEnter.setAttribute("id","frmEnter");
       frmEnter.setAttribute("action","");
       frmEnter.setAttribute("method","post");
       // 创建确定按钮节点
       var btnEnter = document.createElement("input");
       btnEnter.setAttribute("name","btnEnter");
       btnEnter.setAttribute("id","btnEnter");
       btnEnter.setAttribute("type","button");
       btnEnter.setAttribute("value"," 确 定 ");

       // 将确定按钮追加到确定表单中
       frmEnter.appendChild(btnEnter);

       // 将通明阴影层追加到页面（body节点）中
       document.body.appendChild(shadow);
       // 将标题栏追加到提示框节点中
       obj.appendChild(divTitle);
       // 将提示正文内容追加到提示框节点中
       obj.appendChild(Container);
       // 将确定表单追加到提示框节点中
       obj.appendChild(frmEnter);
       // 将提示框节点追加到页面（body节点）中
       document.body.appendChild(obj);

       // 设置关闭按钮和确定按钮的处理函数功能
       hiddenDiv();
}
function hiddenDiv(){
     var objId = document.getElementById("confirmInfo");
     var shadow = document.getElementById("shadow");
     var aClose = document.getElementById("aClose");
     var btnEnter = document.getElementById("btnEnter");
     /***
            如果节点阴影、提示框、关闭按钮或确定按钮，
            有一个节点不存在，则退出此程序（避免报错）
       ***/ 
       if(!shadow || !objId || !aClose || !btnEnter) { 
               return false; 
       }
       else{
                   // 设置关闭和确定按钮的功能--关闭(移除)提示框       
              btnEnter.onclick=aClose.onclick=function(){
              document.body.removeChild(objId); 
              document.body.removeChild(shadow);                                    
         }
     } 
}
//-->
</script>
</head>
<body>
<input name="btnshow" id="btnshow" type="button" onclick="CreateDiv()" value="显示信息层" />
</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>模拟ightbox提示框DEMO</title>
<style type="text/css">
<!--
*{
   margin:0;
   padding:0;
}
body{
   background-color:#FFF;
   color:#000;
   text-align:center;
   font:normal 12px Georgia, "Times New Roman", Times, serif;
}
img{
   max-width:100%;
   height:auto;
   border:0;
}
ul,dl{
   list-style-type:none;
}
.clear{
   clear:both;
   font-size:1px;
   width:1px;
   height:1px;
   visibility:hidden;
}
div,span,p,h1,h2,h3,h4,h5,h6{
   text-align:left;
}
#btnshow{
   margin-top:30px;    
}
#confirmInfo{
   position:absolute;
   width:396px;
   height:236px;
   padding:1px;
   border:1px solid #999;
   z-index:999;
   background-color:#FFF;
   left:50%;
   top:50%;
   margin:-120px 0 0 -200px;
}
#window-title{
   width:372px;
   height:14px;
   padding:5px 0 5px 24px;
   background:#0A246A url(ie-icon.gif) 4px 4px no-repeat;
   color:#FFF;
}
#window-title h2{
   float:left;
   width:200px;
   height:14px;
   overflow:hidden;
   font-size:13px;
}
#window-title a,
#window-title a:link,
#window-title a:hover,
#window-title a:visited{
   float:right;
   margin-right:4px;
   display:blcok;
   width:16px;
   height:14px;
   color:#ffffff;
   background-image:url(close.gif) #fff;
   overflow:hidden;
/*
   text-indent:-200px;
*/
   font-size:14px;
}
#window-title span a:active{
   background-image:url(close-act.gif);
}
#container{
   margin:0 auto;
   margin-top:1px;
   border-top:1px solid #999;
   border-bottom:1px solid #FFF;
   width:396px;
   height:174px;
   overflow:hidden;   
   background-color:#D4D0C8;
}
#container h3{
   margin-top:60px;
   height:14px;
   font-size:14px;
   text-align:center;
   padding:5px 0;
}
#container p{
   margin:0 auto;
   width:380px;
   line-height:150%;
   font-size:14px;
   height:auto;
   text-align:center;
}
#frmEnter{
     margin:0 auto;
   height:22px;
   padding:6px 5px 6px 6px;
   border-top:1px solid #999;
   width:385px;
   text-align:right;
   background-color:#D4D0C8;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
function CreateDiv(){
       var btnShow = document.getElementById("btnshow");
       if(!btnShow) return false;
       var isOpear=(navigator.userAgent.indexOf('Opera')>-1);
       var shadow = document.createElement("div");// 创建透明阴影遮照效果层
       // 给新创建的节点设置各个属性
       shadow.setAttribute("id","shadow"); 
       shadow.style.position="absolute";　 // 　　
       shadow.style.left="0";
       shadow.style.top="0";
       shadow.style.width=screen.width;
       shadow.style.height=screen.height;//
       shadow.style.zIndex="10";
       if(!isOpear){// 如果是Opera浏览器则给shadow设置背景色和透明效果
           shadow.style.backgroundColor="#06C";
           if(document.all){
               shadow.style.filter = "alpha(opacity=20)";
           }
           else{
               shadow.style.opacity = 0.2;
           }
       }
       var obj=document.createElement("div");// 创建提示框层节点
       obj.setAttribute("id","confirmInfo");
       obj.style.zIndex="999";

       var divTitle = document.createElement("div");// 创建提示标题栏节点
       divTitle.setAttribute("id","window-title");

       var H2 = document.createElement("h2");// 创建标题节点
       H2.innerHTML="爱唱卡充值";
       // 创建关闭按钮节点
       var A = document.createElement("a");
       A.innerHTML="关";
       A.href="#";
       A.id="aClose";
       A.title="关闭窗口";

       divTitle.appendChild(H2);// 将标题追加到标题栏
       divTitle.appendChild(A);// 将关闭按钮追加到标题栏

       // 创建提示内容节点
       var Container = document.createElement("div");
       Container.setAttribute("id","container");

       var H3 = document.createElement("h3");// 创建提示正文标题节点
       H3.innerHTML="恭喜您充值成功！";

       var P = document.createElement("p");// 创建提示正文节点
       P.innerHTML="充值单号为：<strong id=\"txtuid\">1dfe</strong>（请您牢记，便于查询）"; 

       Container.appendChild(H3);// 将提示标题追加到提示内容节点中
       Container.appendChild(P)// 将提示正文追加到提示内容节点中

       // 创建确定表单节点
       var frmEnter = document.createElement("form");
       // 设置确定表单各个属性
       frmEnter.setAttribute("name","frmEnter");
       frmEnter.setAttribute("id","frmEnter");
       frmEnter.setAttribute("action","");
       frmEnter.setAttribute("method","post");
       // 创建确定按钮节点
       var btnEnter = document.createElement("input");
       btnEnter.setAttribute("name","btnEnter");
       btnEnter.setAttribute("id","btnEnter");
       btnEnter.setAttribute("type","button");
       btnEnter.setAttribute("value"," 确 定 ");

       frmEnter.appendChild(btnEnter);// 将确定按钮追加到确定表单中
       document.body.appendChild(shadow);// 将通明阴影层追加到页面（body节点）中
       obj.appendChild(divTitle);// 将标题栏追加到提示框节点中
       obj.appendChild(Container);// 将提示正文内容追加到提示框节点中
       obj.appendChild(frmEnter);// 将确定表单追加到提示框节点中
       document.body.appendChild(obj);// 将提示框节点追加到页面（body节点）中
       hiddenDiv(); // 设置关闭按钮和确定按钮的处理函数功能
}
function hiddenDiv(){
	var objId = document.getElementById("confirmInfo");
	var shadow = document.getElementById("shadow");
	var aClose = document.getElementById("aClose");
	var btnEnter = document.getElementById("btnEnter");
	var btnShow = document.getElementById("btnshow");
	if(!shadow || !objId || !aClose || !btnEnter || !btnShow) { // 如果节点(阴影/提示框/关闭按钮/确定按钮)有一个不存在,则退出(免报错)
		return false; 
	}
	else{
		btnEnter.onclick=aClose.onclick=function(){// 设置关闭和确定按钮的功能--关闭(移除)提示框
			document.body.removeChild(objId); 
			document.body.removeChild(shadow); 
			btnShow.disabled=false;    // "显示信息层"按钮可用                              
		}
	} 
}
//-->
</script>
</head>
<body>
<input name="btnshow" id="btnshow" type="button" onclick="CreateDiv()" value="显示信息层" />
<input name="btnshow2" id="btnshow2" type="button"onclick="CreateDiv()" value="显示信息层" />
</body>
</html>
iteye_1458
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
python爬虫02 - 爬虫请求模块 request库 json数据
LonelyDragons的博客
08-11 2万+
6455651
仿LightBox效果提示框
08-22
"仿LightBox效果提示框"是一种常见的网页设计技术，它基于JavaScript（js）实现，灵感来源于经典的LightBox特效。LightBox最初是用来展示图片的，当用户点击一张缩略图时，图片会在当前页面上以半透明背景和居中显示...
javascript keyCode
baby69yy2000
06-28 534
[code="js"] var keyEvent = { 'VK_LEFT': 37, 'VK_RIGHT': 39, 'VK_UP': 38, 'VK_DOWN': 40, 'VK_INSERT': 45, 'VK_DELETE': 46, 'VK_BACK_SPACE...
Linux系统分析工具之uptime，top（一）
weixin_33976072的博客
03-21 129
我们在找系统问题的时候，往往需要借助一些工具，brendangregg发布了一个PPT：Linux Performance Analysis and Tools，其中介绍了大多常用的系统分析工具，而此篇blog及之后的一些blog，会针对这些系统分析工具做一个简要说明，并简析其部分参数的用法，及相关示例，此会持续更新 1> uptime：显示平均负载，此项也经常在...
顺序栈的实现
baby69yy2000
03-14 141
[code="java"]package Stack; /** * 顺序栈的实现 * @author baby69yy2000 */ public class ALStack { private int maxSize; private T[] stackArray; private int top; public ALStack(int s) { ...
幻灯片效果
baby69yy2000
08-24 143
[code="html"] A Lazy animals in the Aegean Sun [/code] [code="js"] *{ margin:0; padding:0; } body{ font...
Javascript DOM 编程实例讲解--仿LightBox效果提示框
03-01
在这个实例中，我们将深入探讨如何使用JavaScript DOM技术来创建一个仿LightBox效果的提示框。LightBox是一种常见的图片预览功能，当用户点击图片时，图片会在当前页面上以半透明背景下的全屏模式显示，提供了一种...
用JavaScript实现仿Windows关机效果
10-31
JavaScript实现仿Windows关机效果是一种在网页中模拟操作系统关机界面的设计手法，它主要通过创建图层并控制其样式来实现。这一效果不仅能够提供一种视觉上的交互体验，还可以帮助防止用户在执行特定操作时进行误...
JS各种弹出框、对联广告（含程序说明）
01-05
在仿Lightbox效果中，已经基本实现了这个效果，这次主要改进了ie6在fixed时的抖动问题。 此外，还增加了一个用来兼容ie6的fixed的方法，覆盖层也重新“包装”，程序也改成组件的结构。 兼容：ie6/7/8, firefox 3.6.8...
100多个JQuery效果示例（实例）div+css+javascrpit
04-09
10. jquery仿LightBox图片盒子单击逐渐放大的图片展示的插件下载 11. jquery仿Lightbox的插件jQuery UI.ariaLightbox点击图片放大显示插件下载 12. jQuery仿动感flash自动滚动图片切换广告插件 13. jQuery仿新浪...
CSS的多态现象
baby69yy2000
12-03 166
[url]http://bbs.blueidea.com/thread-2875900-1-1.html[/url] [code="HTML"] body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;...
【Linux命令】uptime & top
zhanggengxing的博客
11-14 573
uptime 1. uptime命令可以显示系统运行多久、当前有多少的用户登录、在过去的1，5，15分钟里平均负载时多少 标注1：系统当前时间。如 21:14:09 标注2：主机已运行的时长。时长越大，说明服务器越稳定。如 up 9 min，已运行9分钟。 标注3：当前系统登录用户。如 1 user，只有当前用户登录。 标注4：系统在过去1min、5min、15m
微信运动排行榜.html
热门推荐
六桥风月IT随笔
06-17 5万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta content
国外经典Flash网站欣赏
baby69yy2000
12-19 1819
[url]http://www.lookom.com/[/url]
比较爽的DIV+CSS网站
baby69yy2000
01-14 130
国外的： 1.[url]http://www.mp3.com/[/url] 2.[url]http://tech.yahoo.com/[/url] 3.[url]http://cssvault.com/[/url] 4.[url]http://www.msn.com/[/url] 国内的： 1.[url]http://cn.yahoo.com/[/u...
多彩简约风2024年终总结报告动态PPT模板
07-12
【作品名称】：多彩简约风2024年终总结报告动态PPT模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
广西财经学院考研14个学院，72个专业课历年考试真题及答案汇总整理，备考资料题库视频
07-12
广西财经学院考研14个学院，72个专业课历年考试真题及答案汇总整理，备考资料题库视频
人工智能相关完整教程 C++
最新发布
07-12
关于C++开发工程师在人工智能领域的一般性信息、技术栈、项目案例以及测试方法等方面的指导和建议。 专业技能与成就 编程语言与技术栈：精通C++，熟悉Python（常用于AI领域），了解机器学习库如TensorFlow, PyTorch等。 项目类型：参与过计算机视觉、自然语言处理、数据挖掘等AI项目。 关键技术问题：解决过高并发数据处理、算法优化、内存管理等技术难题。 软件测试：运用单元测试、集成测试和性能测试确保软件质量，使用过Google Test等测试框架。 项目案例 假设项目：基于C++的图像识别系统 技术栈：OpenCV, C++, TensorFlow C++ API 问题解决：通过多线程处理提升图像处理速度，使用TensorFlow C++ API部署训练好的模型进行实时预测。 测试技能：编写单元测试验证图像处理模块的准确性，进行压力测试以确保系统稳定性。 职业规划 短期目标：深入学习最新的AI技术和算法，如深度学习、强化学习等。 长期目标：成为AI领域的解决方案专家，为复杂的业务问题提供高效的软件解决方案。
lightbox gallery效果是什么意思
06-02
Lightbox gallery指的是一种网页上图片展示的效果。当用户点击图片时，页面会弹出一个模态框（lightbox），并在其中展示所点击的图片。此时用户可以通过模态框中的按钮或手势来对图片进行放大、缩小、旋转、翻页等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值