当 position: fixed 遇上 transform

项目中模态对话框很普遍，时不时的就会来个弹窗……我们的项目中遇到了一个场景：模态框中的页面需要全屏的支持。全屏处理很简单，其中的这个页面也在其他的场景中实现过，此时到了这里却失灵了，😭😭😭，最终经同事提醒，发现是父容器的样式使用了“transform”

正常的例子

你可以点击旁边的按钮->快点试试吧

项目中的例子

你可以点击旁边的按钮->快点试试吧

其他影响

CSS3 transform对普通元素的N多渲染影响 « 张鑫旭-鑫空间-鑫生活

代码

.mask-layer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    outline: 0;
    background-color: rgba(0, 0, 0, 0.3);
    display: none;
}

.mask-layer-show-ok {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mask-layer>.modal-dialog-ok {
    height: 520px;
    width: 520px;
    background-color: #fff;
}

.mask-layer-show-no {
    display: block;
}

.mask-layer>.modal-dialog-no {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 0;
    margin-bottom: 0;
    transform: translate(-50%, -50%);
    background-color: #fff;
    /* 其他样式控制大小，这里放到一起 */
    height: 520px;
    width: 520px;
}

.business-logic-code.full-screen {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
}
        

正常的例子
你可以点击旁边的按钮->快点试试吧

    

        

            
这里是业务逻辑代码 关闭
            

                全屏
                退出全屏
            
        
    

项目中的例子
你可以点击旁边的按钮->快点试试吧

    

        

            
这里是业务逻辑代码 关闭
            

                全屏
                退出全屏
            
        
    

        

// 1、运行正常的例子（可以全屏）
let btnOKDom = document.getElementById("btnOK"),
    maskLayerOKDom = document.querySelector(".mask-layer-ok"),
    btnClosedOKDom = document.getElementById("btnClosedOK"),
    btnFullScreenOKDom = document.getElementById("btnFullScreenOK"),
    btnExitFullScreenOKDom = document.getElementById("btnExitFullScreenOK"),
    businessLogicCodeOKDom = document.querySelector(".business-logic-code-ok");
function maskLayerOKExitFullScreen() {
    businessLogicCodeOKDom.classList.remove("full-screen");
    btnExitFullScreenOKDom.style.display = "none";
    btnFullScreenOKDom.style.display = "block";
}
btnOKDom.addEventListener("click", function () {
    maskLayerOKExitFullScreen();
    maskLayerOKDom.classList.add("mask-layer-show-ok");
});
btnClosedOKDom.addEventListener("click", function () {
    maskLayerOKDom.classList.remove("mask-layer-show-ok");
});
maskLayerOKDom.addEventListener("click", function (evt) {
    if (evt.target !== maskLayerOKDom) return;
    maskLayerOKDom.classList.remove("mask-layer-show-ok");
});
btnExitFullScreenOKDom.style.display = "none";
btnFullScreenOKDom.addEventListener("click", function () {
    businessLogicCodeOKDom.classList.add("full-screen");
    btnFullScreenOKDom.style.display = "none";
    btnExitFullScreenOKDom.style.display = "block";
});
btnExitFullScreenOKDom.addEventListener("click", maskLayerOKExitFullScreen);

// 2、运行正常的例子（可以全屏）
let btnNODom = document.getElementById("btnNO"),
    maskLayerNODom = document.querySelector(".mask-layer-no"),
    btnClosedNODom = document.getElementById("btnClosedNO"),
    btnFullScreenNODom = document.getElementById("btnFullScreenNO"),
    btnExitFullScreenNODom = document.getElementById("btnExitFullScreenNO"),
    businessLogicCodeNODom = document.querySelector(".business-logic-code-no");
function maskLayerNOExitFullScreen() {
    businessLogicCodeNODom.classList.remove("full-screen");
    btnExitFullScreenNODom.style.display = "none";
    btnFullScreenNODom.style.display = "block";
}
btnNODom.addEventListener("click", function () {
    maskLayerNOExitFullScreen();
    maskLayerNODom.classList.add("mask-layer-show-no");
});
btnClosedNODom.addEventListener("click", function () {
    maskLayerNODom.classList.remove("mask-layer-show-no");
});
maskLayerNODom.addEventListener("click", function (evt) {
    if (evt.target !== maskLayerNODom) return;
    maskLayerNODom.classList.remove("mask-layer-show-no");
});
btnExitFullScreenNODom.style.display = "none";
btnFullScreenNODom.addEventListener("click", function () {
    businessLogicCodeNODom.classList.add("full-screen");
    btnFullScreenNODom.style.display = "none";
    btnExitFullScreenNODom.style.display = "block";
});
btnExitFullScreenNODom.addEventListener("click", maskLayerNOExitFullScreen);