<html>
<head>
<style type="text/css">
#tranDiv {
position:absolute;
left:0px;
top:0px;
}
#tranDivBack {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background-color:#000000;
filter:alpha(Opacity=30);
-moz-opacity:0.3;
opacity:0.3;
}
#infoDiv {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
text-align:center;
}
.pop_box {
background:#FFF;
padding:20px;
border:#666 8px solid;
}
</style>
<script language="javascript">
//弹出对话框，并使背景元素不可用
//var div_width = 464;
//var div_height = 445;
function showWindow(width,height){
location.href="#";
//width = div_width;
//height = div_height;
var windowstr= document.getElementById("popLayer").innerHTML;
document.getElementById("infoDiv").innerHTML=windowstr;
document.getElementById("infoDiv").style.left=((document.body.clientWidth-width)>0?(document.body.clientWidth-width):0)/2+"px";
document.getElementById("infoDiv").style.top=100+"px";
document.getElementById("infoDiv").style.zIndex=10001;
document.getElementById("infoDiv").style.width=width;
document.getElementById("infoDiv").style.height=height;
document.getElementById("tranDiv").style.height=document.body.clientHeight+ "px";
document.getElementById("tranDiv").style.width=document.body.clientWidth+ "px";
document.getElementById("tranDiv").style.display="";
document.getElementById("tranDivBack").style.display="";
document.getElementById("tranDivBack").style.zIndex=10000;
document.getElementById("infoDiv").style.display="";
}
function closeWindow(){
document.getElementById("tranDiv").style.display="none";
}
</script>
</head>
<!--层遮罩部分-->
<div id="tranDiv" style="display:none;">
<div id="tranDivBack"></div>
<div id="infoDiv"></div>
</div>
<!--层遮罩部分结束-->
<!--弹出层-->
<div id="popLayer" style="display:none;">
<div class="pop_box">
<img src="test.jpg" width="424" height="405" />
<button onClick="closeWindow();">关闭</button>
</div>
</div>
<a href="javascript:showWindow(800,600);">点击此处看看</a>
</html>
分享到：
相关推荐
弹出登录框的JQuery弹出浮动层，浮动层可以是另外的页面。无刷新弹层
点击弹出浮动层 弹出遮罩层 点击弹出浮动层 弹出遮罩层
弹出浮动层漂亮登录框 JQuery弹出层 JS浮动层 弹出层特效 JQuery浮动层 JQuery登录浮动层 JQuery登录弹出层
弹出浮动层漂亮登录框 Jquery
js图片轮换+弹出浮动层
3个用于弹出登录框的JQuery弹出浮动层
JQuery弹出层,JS浮动层,弹出层特效,JQuery浮动层,JQuery登录浮动层,JQuery登录弹出层 JQuery弹出层效果，可用于弹出登录框，也可用于Ajax应用等
jQuery遮罩层代码，点击链接弹出浮动层效果，实例中演示弹出了宽度为700PX/350PX/500PX的浮动窗口，有了实例，大家用起来就得心应手了，代码中的jQuery，引自google官方的托管库代码。
用于弹出登录框的JQuery弹出浮动层(www1.zcool.com.cn).rar
JQuery 弹出层 可拖动 透明 兼容各种浏览器，值得收藏，以利后用。
HTML5 弹出框、可关闭的浮动层代码，弹出一个新的div，支持关闭功能，很简单，没有美化，样式如演示截图示，看上去比较基础，挺简单的样式。与传统的HTML弹出框几乎没啥区别，只不过是基于HTML5技术实现的。
jQuery顶部浮动弹出层动画弹出层特效 jQuery顶部浮动弹出层动画弹出层特效 jQuery顶部浮动弹出层动画弹出层特效 jQuery顶部浮动弹出层动画弹出层特效
注意：那个如果你的模板有CSS文件的话，就要直接引入到本页面就行了，这个简化版不能在别的框架弹出层的，所以也就没有了那个cssurl属性了，也没有target 属性了
精美的弹出浮动层代码！网上搜集！有兴趣的可以去试试！黑黑……我其实也是半吊子！
如：我想要这里是弹出浮动遮罩层</div> 并随页面滚动而滚动 只要调用 $('#ok').showModel();这个方法就可以了 调用$('#ok').closeModel();就可以关闭层了 这个插件还有个好处是自动隐藏select控件，关闭后自动显示...
Div做的弹出层，可以动态的调用页面，也可以直接写内容
jquery弹出层当鼠标点击文字或图片弹出层，弹出层浮动在屏幕上可以随浏览器上下滚动，弹出层可自动居中在页面中间