您的位置：首页 > Web前端 > JQuery

jQuery弹出层,兼容ie,Firefox,谷歌浏览器

2010-07-31 14:20 447 查看

<!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=utf-8" />
<title>jQuery弹出层</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script>
function test(url){//URL:弹出层地址
$("#work").css({display:"block"});
$("#work").load(url);
var winwidth=document.body.offsetWidth;//可以给弹出层定位
var winheight=document.body.offsetHeight;
var cenleft=winwidth/2-parseInt(document.getElementById("work").style.width)/2;
var centop=winheight/2-parseInt(document.getElementById("work").style.height)/2;
document.getElementById("work").style.left=cenleft+'px';
document.getElementById("work").style.top=centop+'px';
}
function close2(){
$("#work").css({display:"none"});
$("#work").html("");
}

function add_css(){//给弹出层加css,如果在弹出层里加css，在谷歌浏览器要删除弹出层的<body>
var str_css = "@import url(css/items.css);"; //定义内容
try { //IE下可行
var style = document.createStyleSheet();
style.cssText = str_css;
}
catch(e){ //Firefox,Opera,Safari,Chrome下可行
var style = document.createElement("style");
style.type = "text/css";
style.textContent = str_css;
document.getElementsByTagName("HEAD").item(0).appendChild(style);
}
}

</script>
</head>
<body>
<a href="#" onclick="test('my_items.html');add_css();">点击</a>
<script language="javascript" src="loadHtml.js"></script>
</body>
</html>
---------------------------------------------------------------------------
---------------------------------------------------------------------------
loadHtml.js:

document.writeln("<div id='work' style='z-index:9999;display:none; width:1000px; height:249px; border: 0px solid red;position:absolute;top:expression((document.documentElement.clientHeight-this.offsetHeight)/3);left:expression((document.documentElement.clientWidth-this.offsetWidth)/2);'></div>");

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航