• 简单的弹出层加遮罩层效果


    <!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" />
    </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 是否超出边界
            top = top < 0 ? 0 : top;
            top = top > document.body.offsetHeight - 150 ? document.body.offsetHeight - 150 : top;
            left = left < 0 ? 0 : left;
            left = 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>
  • 相关阅读:
    传输线
    互连设计
    数字IC·功耗
    [z]一个合格的FPGA工程师需要掌握哪些知识?
    Arduino I2C + DS1307实时时钟
    Arduino I2C + 温湿度传感器Si7021
    Arduino I2C + 温湿度传感器AM2321
    Arduino I2C + 数字式环境光传感器BH1750FVI
    什么是“光照度(Illuminance)”?
    Arduino ADC + 模拟温度传感器LM35D
  • 原文地址:https://www.cnblogs.com/CoderWayne/p/5680651.html
Copyright © 2020-2023  润新知