[转]仿lightbox提示框效果

baby69yy2000

浏览: 183928 次
性别:
来自: 自己输入城市...

最近访客更多访客>>

fuweijunya

netstu

梓梦花开

woshihunren

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JS-3

Opera IE 浏览器 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>

分享到：

Tomcat入门配置 | 优先队列的实现

2008-05-19 03:45
浏览 1657
评论(0)
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

[转]仿lightbox提示框效果

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

[转]仿lightbox提示框效果

评论

发表评论

相关推荐

在JavaScript中实现统计文本框Textarea字数

CSS下拉菜单

JavaScript 渐变效果

幻灯片效果

(转)改善用户体验之密码强度提示

4个很不错的日历代码

最近访客更多访客>>