技术文章
当前位置:首页 > 技术文章

div+css弹出网页对话框效果

<!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>DivDialog</title>
</head>
<style type="text/css">
body{margin:0;padding:0;font-size:12px}
</style>
<body>
<script type="text/javascript">
var sDivWidth=500;
var sDivHeight=300;
var sWidth=screen.width;
var sLeft=(sWidth-sDivWidth)/2;
document.write(''''<div style="margin:0px;width:100%;height:100%;">'''');
document.write(''''<div id="fixed" style="margin:0px;z-index:10; top:25%; left:''''+sLeft+''''px;width:''''+sDivWidth+''''px;height:''''+sDivHeight+''''px;background:#f6f6f6;border:#dedede 1px solid;position:absolute;display:none;">'''');
document.write(''''<a onclick="javascript:act();">[关闭]</a>-对话框Html内容!'''');
document.write(''''</div></div>'''');
document.write(''''<div id="hidd" style="position:absolute;width:100%; height:100%;overflow:hidden;z-index:9; display:none;"></div>'''');
function _(o){return document.getElementById(o);}
function act(){if(_("fixed").style.display!=''''block''''){_("fixed").style.display=''''block''''; _("hidd").style.display=''''block'''';}
else{ _("fixed").style.display=''''none'''';_("hidd").style.display=''''none'''';}}
</script>
<div><a onclick="javascript:act();">显示Div对话框</a></div>
</body>
</html>
<div id="dlgData" style="display:none"></div>
<script type="text/javascript">
function dlg(showid, id, name) {
var sDivWidth = 500;
var sDivHeight = 300;
var sWidth = screen.width;
var sHeight = document.body.clientHeight;
var sLeft = (sWidth - sDivWidth) / 2;
var js = "";
js += ''<div style="margin:0px;width:100%;height:100%;">'';
js += ''<div id="fixed" style="margin:0px;z-index:10; top:25%; left:'' + sLeft + ''px;width:'' + sDivWidth + ''px;height:'' + sDivHeight + ''px;background:#f6f6f6;border:#dedede 1px solid;position:absolute;">'';
js += ''<a onclick="javascript:act(0,0,0);">[关闭]</a>-'' + name + '''';
js += ''<iframe scrolling="no" frameborder="0" width="480" height="280" src="tb.aspx?id='' + id + ''"></iframe>'';
js += ''</div></div>'';
js += ''<div id="hidd" style="background:#000000;filter:alpha(opacity=20);-moz-opacity:0.20;width:100%; height:'' + sHeight + ''px;position:absolute; top:0; left:0;z-index:9"></div>'';
if (showid == 1) {
document.getElementById("dlgData").style.display = "";
document.getElementById("dlgData").innerHTML = js;
}
else {
document.getElementById("dlgData").style.display = "none";
document.getElementById("dlgData").innerHTML = "";
}
}
function _(o) { return document.getElementById(o); }
function act(showid, id, name) {
dlg(showid, id, name);
}
</script>
</body>
</html>