当前位置: 代码迷 >> JavaScript >> js弹出层正中
  详细解决方案

js弹出层正中

热度:93   发布时间:2012-11-10 10:48:50.0
js弹出层居中

<!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>OpenBox</title>
</head>
<style type="text/css">
body{font-size:14px;}
.openbox_bg,.openbox{position:absolute; display:none;}
.openbox_bg{left:0; top:0; background:#000; width:100%; height:100%; filter:alpha(opacity=60); opacity:0.6; z-index:99; }
.openbox{top:50%; left:50%; margin:-180px 0 0 -350px; width:700px; height:360px; background:#FFF; z-index:100;}
.openbox a{float:right; margin:5px 5px 0 0;}
</style>
<script type="text/javascript">
function G(id) {
    return document.getElementById(id);
}
function openbox(url) {
    G("openbox").style.display = "block";
    G("openbox_bg").style.display = "block";
    if (url != '') {
        G("openbox_iframe").src = url;
    }
}
function closebox() {
    G("openbox").style.display = "none";
    G("openbox_bg").style.display = "none";
    G("openbox_iframe").src = "about:blank";
}
</script>
<body>
<a href="#" mce_href="#" onclick="openbox('http://baidu.com')">打开弹出层</a>

<!-- openbox -->
<div id="openbox_bg" class="openbox_bg"></div>
<div class="openbox" id="openbox">
    <a href="#" mce_href="#" onclick="closebox()">关闭</a>
    <iframe id="openbox_iframe" width="100%" height="100%" frameborder="0" scrolling="no" src="about:blank"></iframe>
</div>
<!-- openbox end -->

</body>
</html>
?

  相关解决方案