div 方式窗体

2012-11-23

div模式窗体!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xht

div 模式窗体
<!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 onclick="closeDIV()" type="button" value="关闭"> </td>
        </tr>
    </table>
</div>
<div align="center"><input onclick="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>

热点排行

Web前端

div 方式窗体