您的位置：首页 > 其它

记录一下：弹出DIV层代替弹出窗口

2010-07-04 20:02 148 查看
备注：待解决问题——关闭弹出层时，如何同时刷新原页面INDEX.HTML？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>index</title>
<mce:style><!--
.divtitle{
width: 200px;
height: 18px;
background-image: url('/imgs/2.jpg');
font-size: small;
font-weight: bold;
}
.closez{
cursor: pointer;
padding-left:110px;
}
.divcontext{
font-size: smaller;
border:1px solid red;
width: 200px;
height: 100px;
background-color: white;
}
.divbutton{
padding-left: 150px;
}
--></mce:style><style mce_bogus="1">.divtitle{
width: 200px;
height: 18px;
background-image: url('/imgs/2.jpg');
font-size: small;
font-weight: bold;
}
.closez{
cursor: pointer;
padding-left:110px;
}
.divcontext{
font-size: smaller;
border:1px solid red;
width: 200px;
height: 100px;
background-color: white;
}
.divbutton{
padding-left: 150px;
} </style>
<mce:script type="text/javascript"><!--
/* 动态创建背景层； */
function _ungroupay() {
var node = document.getElementById('sysbackgroupdis');
if (!node) {
node = document.createElement('div');
node.setAttribute('id', 'sysbackgroupdis');
node.style.visibility = 'hidden';
node.style.height = document.body.clientHeight + 'px';
node.style.width = document.body.clientWidth + 'px';
node.style.background = '#999';
node.style.opacity = '0.5';
node.style.filter = 'alpha(opacity=60)';
node.style.position = 'absolute';
node.style.top = '-9999px';
document.body.appendChild(node);
}
node.style.top = '0px';
node.style.left = '0px';
node.style.visibility = 'visible';
node.style.zIndex = 1;
}
/*页面显示类容*/
_systemplate = "<div align=/"center/" class=/"maincontext/" id=/"maincontext/">"+
"<div id=/"divtitle/" class=/"divtitle/">标题<a class=/"closez/" onclick=/"javascript:logoutdisp();/">关闭</a></div>"+
"<div id=/"divcontext/" class=/"divcontext/">"+
"<input type=/"button/" value=/"确定/" onclick=/"javascript:alert('提交');/"><p>填入其他代码</div>< /div>";

/* 创建调度函数 */
function calldisp() {
_ungroupay();
var node = document.getElementById('onbackground');
if (!node) {
node = document.createElement('div');
node.setAttribute('id', 'onbackground');
node.style.visibility = 'hidden';
node.style.top = '-9999px';
node.style.position = 'absolute';
node.style.border = '1px';
node.style.borderColor = 'black';
node.style.borderStyle = 'solid';
node.innerHTML = document.getElementById('maincontext').innerHTML;
document.body.appendChild(node);
}
node.style.top = Math.floor(document.body.scrollTop+(document.body.clientHeight-node.offsetHeight)/2)+'px';
node.style.left = Math.floor(document.body.scrollLeft+(document.body.clientWidth-node.offsetWidth)/2)+'px';
node.style.visibility='visible';
node.style.zIndex = 999;
}
/*退出层*/
function logoutdisp() {
var layerNode = document.getElementById("onbackground");
var underLayerNode = document.getElementById("sysbackgroupdis");
if (layerNode) {
layerNode.style.visibility="hidden";
layerNode.style.top = "-9999px";
}
if (underLayerNode) {
underLayerNode.style.visibility="hidden";
underLayerNode.style.top = "-9999px";
}
}
// --></mce:script>
</head>
<body>
<div id="main" align="center">
<input type="button" value="打开层" onclick="javascript:calldisp();">
</div>
<div style="display: none;" mce_style="display: none;">
<div align="center" class="maincontext" id="maincontext">
<div id="divtitle" class="divtitle">标题<a class="closez" onclick="javascript:logoutdisp();">关闭</a></div>
<div id="divcontext" class="divcontext"><!--填写你需要的代码 start-->
<p>填入代码</p>
<div>输入：<input type="text"/></div> <!--填写你需要的代码 end-->
<div class="divbutton">
<input id="button" class="button" type="button" value="确定" onclick="javascript:logoutdisp();">
</div>
</div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航