css3点击弹出全屏层并且不能移动

CSS3实现点击弹出全屏层的效果，可以为网页增添一些互动性，提高用户的体验。在这篇文章中，我们将介绍如何使用CSS3来实现点击弹出全屏层，同时防止用户拖动层。

html,body{
        height: 100%;
        overflow:hidden;
    }
.overlay {
        position:fixed;
        display: none;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 999999;
   }
.overlay.active {
        display: block;
}
.overlay-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        color: #fff;
        text-align: center;
        font-size: 20px;
}

首先，我们需要在HTML文件中添加一个全屏层的元素，使用div标签，class设置为overlay。

            
这是一个全屏层
        
点击层外或按Esc键可以关闭我
    

接着，在CSS文件中为.overlay设置样式，使其覆盖整个页面，并且背景色为半透明黑色。同时，将层的z-index设置为一个比较大的值，保证它在页面中处于最上方。

下一步，我们需要为 .overlay.active 设置样式，来让它在被触发时展示。这时我们要使用JavaScript来添加active class，使得导致 .overlay 展示的事件发生时，层可以被显示。

最后一步就是防止用户拖动全屏层。我们可以在html,body中设置 overflow:hidden，这样用户就不能滚动页面。同时，在.overlay中设置position: fixed是可以防止用户在页面中滑动层。

$(document).ready(function(){
    // 点击任意位置关闭全屏层    $(".overlay").click(function(){
            $(this).removeClass("active");
    }
    );
    // 按ESC键关闭全屏层    $(document).keyup(function(event){
        if(event.keyCode == 27){
                $(".overlay").removeClass("active");
        }
    }
    );
    // 点击按钮弹出全屏层    $(".btn-open").click(function(){
            $(".overlay").addClass("active");
    }
    );
}
    );
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！