div 模式窗体

最新推荐文章于 2021-08-03 22:18:23 发布

zeng7960983

最新推荐文章于 2021-08-03 22:18:23 发布

阅读量181

点赞数

分类专栏： javascript 文章标签：浏览器 UP XHTML HTML

本文链接：https://blog.youkuaiyun.com/zeng7960983/article/details/83675832

版权

javascript 专栏收录该内容

8 篇文章

订阅专栏

<!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>无标题文档</title>
<style>
#mbDIV
{
position: absolute;
top: 0px;
left: 0px;
width:expression(screen.width+"px"); /*获得浏览器的宽度 document.body.clientWidth也可以*/
height:expression(screen.height+"px"); /*获得浏览器的宽度 document.body.clientHeight也可以*/
background-color: #AAAAAA;
z-index: 30;
filter: alpha(opacity=50);
}
#loginDIV
{
position: absolute;
width: 500px;
height: 180px;
background-color:white;
z-index: 40;
}
#loginTopDIV
{
width: 100%;
height: 22px;
text-align:center;
background-color: blue;
cursor: move;
}
</style>

</head>

<body>
<div id="mbDIV" style="display: none;"></div>
<div id="loginDIV" style="display: none; left: 300px; top: 200px">
<div id="loginTopDIV">div模式窗体</div>
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td align="center" colspan="2">这里就对话框中的内容，且支持拖动功能，欢迎测试！ </td>
</tr>
<tr>
<td align="center"><input οnclick="closeDIV()" type="button" value="关闭"> </td>
</tr>
</table>
</div>
<div align="center"><input οnclick="openDIV()" type="button" value="测试DIV模拟showModalDialog对话框"> </div>

<script>
function show(ele)
{
document.getElementById(ele).style.display="block";
}
function hidden(ele)
{
document.getElementById(ele).style.display="none";
}
function closeDIV()
{
hidden("loginDIV");
hidden("mbDIV");
}
function openDIV()
{
show("loginDIV");
show("mbDIV");
}
var mbDIV = document.getElementById("mbDIV");;
var loginDIV = document.getElementById("loginDIV");
var loginTopDIV = document.getElementById("loginTopDIV");

/**
*这里写的是拖动信息
* */
loginTopDIV.onmousedown = Down;
var tHeight,lWidth;
function Down(e)
{
var event = window.event || e;
tHeight = event.clientY - parseInt(loginDIV.style.top.replace(/px/,""));
lWidth = event.clientX - parseInt(loginDIV.style.left.replace(/px/,""));
document.onmousemove = Move;
document.onmouseup = Up;
}
function Move(e) {
var event = window.event || e;
var top = event.clientY - tHeight;
var left = event.clientX - lWidth;
//判断 top 和 left 是否超出边界
top = top < 0 ? 0 : top;
top = top > screen.height - 150 ? screen.height - 150 : top;
left = left < 0 ? 0 : left;
left = left >screen.width- 300 ?screen.width - 300 : left;
loginDIV.style.top = top + "px";
loginDIV.style.left = left +"px";
}
function Up() {
document.onmousemove = null;
}

</script>

</body>
</html>