JS原生态仿百度遮罩层，窗口拖动效果

CSS样式

*{margin: 0px;padding:0px;}
a{text-decoration: none;}
#dl{width: 50px;height: 30px;position: absolute;right: 10px;top:3px;line-height: 30px;}
#box{width: 400px;height: 450px;position: absolute;background:#fff;display: none;z-index:2;}
#top{width: 400px;height: 35px;border-bottom: 1px solid #999;position: relative;}
#gb{position: absolute;right: 5px;top: 5px;}
#logo{margin: 0px auto;width: 540px;}
#ss{margin: 0px auto;width: 400px;float: left;margin-left: 410px;}
#bd{font-size:18px;background: #05f;text-align: center;width:120px;height: 37px;color: #fff;float: left;text-align: center;line-height: 37px;cursor: pointer;}
#ss input{height: 35px;width: 400px;font-size: 20px;}

HTML结构

<div id="dl"><a href="javascript:dlxx();">登录</a></div>
<div id="logo"><img src="1.png"></div>
<div id="ss"><input type="text"></div>
<div id="bd">百度一下</div>
<div id="box">
    <div id="top">
        <div id="gb">关闭</div>
    </div>
</div>  

JavaScript

var odl = document.getElementById("dl");
        var obox = document.getElementById("box");

         function getWidthHeight(){
                  var width = window.innerWidth||document.documentElement.clientWidth;
                  var height = window.innerHeight||document.documentElement.clientHeight;
                  return [width,height];
         } 

        function dlxx(){  //点击登录的时候 创建一个遮罩
            
            var nodeDiv = document.createElement("div");//创建div
            var kuanGao = getWidthHeight();
            nodeDiv.style.width=kuanGao[0]+"px";//设置样式
            nodeDiv.style.height=kuanGao[1]+"px";
            nodeDiv.style.backgroundColor="#000";
            nodeDiv.style.position="absolute";
            nodeDiv.style.top="0px";
            nodeDiv.style.opacity="0.3";
            nodeDiv.style.zIndex=1;
            nodeDiv.setAttribute("id","div1")
            document.body.appendChild(nodeDiv);//添加节点

            var oBox = document.getElementById("box");
            oBox.style.display="block";
            oBox.style.left=(kuanGao[0]-400)/2+"px";
            oBox.style.top=(kuanGao[1]-450)/2+"px";

        }

        var gb = document.getElementById("gb");
        gb.onclick=function(){
            var oBox = document.getElementById("box");
            var oDiv1 = document.getElementById("div1");

            oBox.style.display="none";
            document.body.removeChild(oDiv1);
        }

        window.onresize = function(){ //检测到浏览器窗口发生变化时出发事件
            var oDiv1 = document.getElementById("div1");
            var kuanGao = getWidthHeight();
            oDiv1.style.width=kuanGao[0]+"px";//设置样式
            oDiv1.style.height=kuanGao[1]+"px";

            var oBox = document.getElementById("box");

            oBox.style.left=(kuanGao[0]-400)/2+"px";
            oBox.style.top=(kuanGao[1]-450)/2+"px";

        }
        obox.onmousedown=function(ev){//当鼠标按下时,产生两个变量
            obox.style.cursor="move";
            var oEvent = ev||event;
            var x = oEvent.clientX - box.offsetLeft;
            var y = oEvent.clientY - box.offsetTop;

        
            document.onmousemove=function(ev){
                var oEvent = ev||event;
                obox.style.left=oEvent.clientX-x+"px";
                obox.style.top=oEvent.clientY-y+"px";

            };
            document.onmouseup=function(){
                document.onmousedown="null";
                document.onmousemove="null";
                obox.style.cursor="";
            };
        };

        var bd=document.getElementById("bd");
        bd.onclick=function(){
            alert("我不知道");

        }

上一篇：mysql数据库备份与恢复

下一篇：Mysql触发器的使用方法