<html>
<!-- 仅能用于IE,谁知道怎么在firefox下的实现,请告诉我,谢谢-->
<head>
<style>
div.titleBar{background: #CC66CC;margin: 0px auto;width: 100%;height: 21px;border: #0000FF solid 1px;}
div.closeButton{float: right;}
div.mainBody{margin: auto;}
#divModalDialog{border:solid 1px;background:white;POSITION: absolute;left:0px;top:0px;DISPLAY: none;z-index:49;height:200px;WIDTH: 350px;}
#divModal{BACKGROUND-COLOR: white; FILTER: alpha(opacity=75); LEFT: 0px; POSITION:absolute; TOP: 0px"}
</style>
<script>
function showModel()
{
divModalDialog.style.display = "block";
resizeModal();
window.onresize = resizeModal;
}
function closeModel()
{
divModal.style.width = "0px";
divModal.style.height = "0px";
divModalDialog.style.display = "none";
window.onresize = null;
}
function resizeModal()
{
divModal.style.width = document.body.scrollWidth;
divModal.style.height = document.body.scrollHeight;
divModalDialog.style.left = ((document.body.offsetWidth - divModalDialog.offsetWidth) / 2);
divModalDialog.style.top = ((document.body.offsetHeight - divModalDialog.offsetHeight) / 2);
}
</script>
</head>
<body>
<input type="button" value="点击这里" οnclick="showModel()" />
<!-- 透明遮罩 -->
<DIV id="divModal"></div>
<!-- 透明遮罩 end -->
<!-- 模态窗口 -->
<DIV id="divModalDialog" >
<div class="titleBar">
<div class="closeButton"><a href="javascript:closeModel();">[关闭]</a></div>
</div>
<div class="mainBody">
在这里添加内容
</div>
</DIV><!-- 模态窗口 end -->
</body>
</html>
<!-- 仅能用于IE,谁知道怎么在firefox下的实现,请告诉我,谢谢-->
<head>
<style>
div.titleBar{background: #CC66CC;margin: 0px auto;width: 100%;height: 21px;border: #0000FF solid 1px;}
div.closeButton{float: right;}
div.mainBody{margin: auto;}
#divModalDialog{border:solid 1px;background:white;POSITION: absolute;left:0px;top:0px;DISPLAY: none;z-index:49;height:200px;WIDTH: 350px;}
#divModal{BACKGROUND-COLOR: white; FILTER: alpha(opacity=75); LEFT: 0px; POSITION:absolute; TOP: 0px"}
</style>
<script>
function showModel()
{
divModalDialog.style.display = "block";
resizeModal();
window.onresize = resizeModal;
}
function closeModel()
{
divModal.style.width = "0px";
divModal.style.height = "0px";
divModalDialog.style.display = "none";
window.onresize = null;
}
function resizeModal()
{
divModal.style.width = document.body.scrollWidth;
divModal.style.height = document.body.scrollHeight;
divModalDialog.style.left = ((document.body.offsetWidth - divModalDialog.offsetWidth) / 2);
divModalDialog.style.top = ((document.body.offsetHeight - divModalDialog.offsetHeight) / 2);
}
</script>
</head>
<body>
<input type="button" value="点击这里" οnclick="showModel()" />
<!-- 透明遮罩 -->
<DIV id="divModal"></div>
<!-- 透明遮罩 end -->
<!-- 模态窗口 -->
<DIV id="divModalDialog" >
<div class="titleBar">
<div class="closeButton"><a href="javascript:closeModel();">[关闭]</a></div>
</div>
<div class="mainBody">
在这里添加内容
</div>
</DIV><!-- 模态窗口 end -->
</body>
</html>