Javascript弹出层-初探

IFE2016 task 37

1 生成遮罩层

    function addMask(){
        var body = document.getElementsByTagName("body")[0];
        body.style.overflow = "hidden";
    
        var scrollH = document.documentElement.clientHeight;
        var oMask = document.createElement("div");
        oMask.style.cssText = "position:absolute;top:0;left:0;height:"+scrollH+"px;width:100%;background-color:#000;opacity:0.6;z-index:1000;";
        document.body.appendChild(oMask);
    
        var float = document.createElement("div");
        float.id = "float";
        float.style.cssText = "position:absolute;top:50%;left:50%;height:200px;width:400px;transform:translate(-50%,-50%);background-color:#ccc;z-index:1001;";
        document.body.appendChild(float);
    
        oMask.onclick = function(){
            document.body.removeChild(oMask);
            document.body.removeChild(float);
            body.style.overflow = "auto";
        }
        drag();
    }

新建 遮罩层  和 弹出层
oMask的宽度高度 给到当前屏幕可视区域的 宽高
float居中定位

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

body.style.overflow = "hidden";
body.style.overflow = "auto";

这两行代码
在遮罩层弹出时 禁止界面滑动

2.弹出层的移动

     function drag(){
            var float = document.getElementById("float");
        
            float.addEventListener("mousedown",function(event){
                startX = event.pageX - float.offsetLeft;
                startY= event.pageY - float.offsetTop;
                draging = true;
            },false);
        
            document.addEventListener("mousemove",function(event){
                var nowX= event.pageX;
                var nowY= event.pageY;
                var moveX = 0;
                var moveY = 0;
                if (draging === true) {
                    moveX = nowX- startX ;
                    moveY = nowY - startY;
                    //控制DIV不超出屏幕边界
                    var scrollW = document.documentElement.clientWidth;
                    var scrollH = document.documentElement.clientHeight;
                    var divW = float.offsetWidth;
                    var divH = float.offsetHeight;
                    var maxX = scrollW - divW/2;
                    var maxY = scrollH - divH/2;
        
                    moveX = Math.min( maxX , Math.max(divW/2,moveX) );
                    moveY = Math.min( maxY , Math.max(divH/2,moveY) );
        
                    float.style.left = moveX + "px";
                    float.style.top = moveY + "px";
                }
            },false);

通过startX startY nowX nowY
确定鼠标移动的距离 moveX moveY
mousemove属性设置在document 避免鼠标速度过快离开 弹出层
可以添加CSS 属性 corsor 来改变鼠标样式

点此查看详情

3.DIV大小的改变

#float{
    overflow: auto;
    resize: both;
}

定义和用法

resize 属性规定是否可由用户调整元素的尺寸。

注释：如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。