实现简单的弹出层

来源:互联网 发布:ug8.0编程视频教程硬盘 编辑:程序博客网 时间:2024/05/20 21:20

在页面中引入样式:

<style type="text/css">
#faqbg{background-color:#000000; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:1000px;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}
#faqdiv{position:absolute;width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}
</style>

在body标签下定义div:

<div id="faqbg"></div>阴影层

 

 <div id="faqdiv" style="display:none">

弹出层的显示区域
 </div>

 

function show(){

 $("#faqbg").css({display:"block",height:$(document).height()});
 $("#faqdiv").css("display","");

}

function close(){

 $("#faqbg").css("display","none");
 $("#faqdiv").css("display","none");

}

0 0