`
baby69yy2000
  • 浏览: 187889 次
  • 性别: Icon_minigender_1
  • 来自: 自己输入城市...
社区版块
存档分类
最新评论

[转]仿lightbox提示框效果

    博客分类：
  • JS-3
OperaIE浏览器XHTML 
阅读更多
演示地址：http://www.yaohaixiao.com/code/alertbox/index.htm 
<!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>
分享到：
| 优先队列的实现
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    仿LightBox效果提示框

    "仿LightBox效果提示框"是一种常见的网页设计技术，它基于JavaScript（js）实现，灵感来源于经典的LightBox特效。LightBox最初是用来展示图片的，当用户点击一张缩略图时，图片会在当前页面上以半透明背景和居中显示...

    Javascript DOM 编程实例讲解--仿LightBox效果提示框

    在这个实例中，我们将深入探讨如何使用JavaScript DOM技术来创建一个仿LightBox效果的提示框。LightBox是一种常见的图片预览功能，当用户点击图片时，图片会在当前页面上以半透明背景下的全屏模式显示，提供了一种...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    10. jquery仿LightBox图片盒子单击逐渐放大的图片展示的插件下载 11. jquery仿Lightbox的插件jQuery UI.ariaLightbox点击图片放大显示插件下载 12. jQuery仿动感flash自动滚动图片切换广告插件 13. jQuery仿...

    100多个JQuery效果示例（实例）div+css+javascrpit

    10. jquery仿LightBox图片盒子单击逐渐放大的图片展示的插件下载 11. jquery仿Lightbox的插件jQuery UI.ariaLightbox点击图片放大显示插件下载 12. jQuery仿动感flash自动滚动图片切换广告插件 13. jQuery仿新浪...

    JS各种弹出框、对联广告（含程序说明）

    在仿Lightbox效果中，已经基本实现了这个效果，这次主要改进了ie6在fixed时的抖动问题。 此外，还增加了一个用来兼容ie6的fixed的方法，覆盖层也重新“包装”，程序也改成组件的结构。 兼容：ie6/7/8, firefox 3.6.8...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    10. jquery仿LightBox图片盒子单击逐渐放大的图片展示的插件下载 11. jquery仿Lightbox的插件jQuery UI.ariaLightbox点击图片放大显示插件下载 12. jQuery仿动感flash自动滚动图片切换广告插件 13. jQuery仿新浪...

    jquery 动态示例

    10. jquery仿LightBox图片盒子单击逐渐放大的图片展示的插件下载 11. jquery仿Lightbox的插件jQuery UI.ariaLightbox点击图片放大显示插件下载 12. jQuery仿动感flash自动滚动图片切换广告插件 13. jQuery仿新浪...

    非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等.zip

    jquery仿LightBox图片盒子单击逐渐放大的图片展示的插件下载 jquery仿Lightbox的插件jQuery UI.ariaLightbox点击图片放大显示插件下载 jQuery仿动感flash自动滚动图片切换广告插件 jQuery仿新浪新闻图片浏览器(支持...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    10.jquery仿LightBox图片盒子单击逐渐放大的图片展示的插件下载 11.jquery仿Lightbox的插件jQuery UI.ariaLightbox点击图片放大显示插件下载 12.jQuery仿动感flash自动滚动图片切换广告插件 13.jQuery仿新浪...

    用JavaScript实现仿Windows关机效果

    JavaScript实现仿Windows关机效果是一种在网页中模拟操作系统关机界面的设计手法，它主要通过创建图层并控制其样式来实现。这一效果不仅能够提供一种视觉上的交互体验，还可以帮助防止用户在执行特定操作时进行误...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    /lightbox.html 仿Window关机效果 /lightbox.js JavaScript脚本文件 第23章（/ch23） 程序描述：本章将使用Ajax技术实现动态获取数据的树状菜单。当展开菜单时，自动向服务器发送请求，查询该菜单下的...

Magicbox
Global site tag (gtag.js) - Google Analytics