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。