找到了一个合适的弹出div

最新推荐文章于 2024-10-09 08:50:07 发布
digmouse
最新推荐文章于 2024-10-09 08:50:07 发布
阅读量446
点赞数
文章标签： div button function filter null 测试
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>简单的测试页面</title>
  <style type="text/css">
  <!--
    html
    {
      height: 100%;
    }
    body
    {
      margin: 0px;
      padding: 0px;
      height: 100%;
    }
    #dt_3
    {
      cursor: pointer;
    }
    div#mbDIV
    {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background-color: #AAAAAA;
      z-index: 10;
      filter: alpha(opacity=80);opacity:0.8;
    }
    div#loginDIV
    {
      position: absolute;
      width: 300px;
      height: 150px;
      background-color: #FFFF00;
      z-index: 20;
    }
    div#loginTopDIV
    {
      width: 100%;
      height: 20px;
      background-color: #FF0000;
      cursor: move;
    }
  -->
  </style>
  <script type="text/javascript">
  <!--
    function show(ele)
    {
      eval(ele + ".style.display = ''");
    }
    function hidden(ele)
    {
      eval(ele + ".style.display = 'none'");
    }
  //-->
  </script>
</head>
<body>
<div style="overflow: hidden;">
<h3>请点击 --> 03号拖拉机</h3>
<p id="dt_1">01号拖拉机</p>
<p id="dt_2">02号拖拉机</p>
<p id="dt_3">03号拖拉机</p>
<p id="dt_4">04号拖拉机</p>
<p id="dt_5">05号拖拉机</p>
<p id="dt_6">06号拖拉机</p>
<p id="dt_7">07号拖拉机</p>
<p id="dt_8">08号拖拉机</p>
<p id="dt_9">09号拖拉机</p>
<p id="dt_10">10号拖拉机</p>
<p id="dt_11">11号拖拉机</p>
</div>
<div id="mbDIV" style="display: none;"></div>
<div id="loginDIV" style="top: 200px;left: 300px;display: none;">
<div id="loginTopDIV">Move</div>
<p style="text-align: center;">登陆内容在这里哦</p>
<form action="#" method="get" style="text-align: center;">
<input type="button" value="确定" id="button_1" /> <input type="button" value="取消" id="button_2" />
<input type="button" onclick="alert('ok')">
</form>
</div>
<script type="text/javascript">
<!--
/**
* 这里是乱七八遭信息
* */
  for(var i=1;i<=11;i++)
  {
    eval("var dt_" + i + " = document.getElementById('dt_" + i + "')");
  }
  var mbDIV = document.getElementById("mbDIV");
  var loginDIV = document.getElementById("loginDIV");
  var loginTopDIV = document.getElementById("loginTopDIV");
  document.getElementById("button_1").onclick = function()
                                                {
                                                  hidden("loginDIV");
                                                  hidden("mbDIV");
                                                }
  document.getElementById("button_2").onclick = function()
                                                {
                                                  hidden("loginDIV");
                                                  hidden("mbDIV");
                                                }
  dt_3.onclick = function()
                 {
                   loginDIV.style.top = "200px";
                   loginDIV.style.left = "300px";
                   show("loginDIV");
                   show("mbDIV")
                 }
/**
*这里写的是拖动信息
* */
    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 是否超出边界
        toptop = top < 0 ? 0 : top;
        toptop = top > document.body.offsetHeight - 150 ? document.body.offsetHeight - 150 : top;
        leftleft = left < 0 ? 0 : left;
        leftleft = left > document.body.offsetWidth - 300 ? document.body.offsetWidth - 300 : left;
        loginDIV.style.top  = top + "px";
        loginDIV.style.left = left +"px";
    }
    function Up() {
        document.onmousemove = null;
    }
//-->
</script>
</body>
</html>
 