怎么用js+css实现div遮罩层效果

发布时间:2021-07-26 13:38:29 作者:chen
来源:亿速云 阅读:400

本篇内容主要讲解“怎么用js+css实现div遮罩层效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用js+css实现div遮罩层效果”吧!

<style type="text/css">
/* 半透明的遮罩层 */
#overlay {
    background: #000;
    filter: alpha(opacity =   50); /* IE的透明度 */
    opacity: 0.5; /* 透明度 */
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 100; /* 此处的图层要大于页面 */
    display: none;
}
/* 内容层 */
.MyAlertBox {
    position: absolute;
    /*z-index设置元素的堆叠顺序 仅能在定位元素上奏效(例如 position:absolute;)*/
    z-index: 200;
    width: 520px;
    height: 349px;
}
/* 遮罩层关闭按钮默认样式 */
.closeBtn {
    position: absolute;
    z-index: 300;
    width: 35px;
    height: 20px;
    cursor: pointer;
    margin: -146px 220px;
    background: url("<%=basePath %>common/imgs/cross_diy.png") no-repeat;
}
/* 遮罩层关闭按钮 */
.closeBtn_hover{
    background: url("<%=basePath %>common/imgs/cross_diy_hover.png") no-repeat;
}
</style>
<script type="text/javascript">
/*绑定单击事件*/
$(function(){
    /*绑定单击事件*/
    $("#loginBtn").click(function(){
        showOverlay();
        adjust("loginFrame");
        adjust("closeBtn");
    });
    /*遮罩层关闭按钮*/
    $("#closeBtn").click(function(){
        hideOverlay();
    });
    /*遮罩层关闭按钮*/
    $("#closeBtn").hover(function(){
        $("#closeBtn").toggleClass("closeBtn_hover");
    });
    //当浏览器窗口大小改变时
    $(window).resize(function () {
        adjust("loginFrame");
        adjust("closeBtn");
    });
    //当拉动滚动条时,弹出层和遮罩层跟着移动
    $(window).scroll(function () {
        adjust("loginFrame");
        adjust("closeBtn");
        //网页被卷去的左
        myleft = $(document).scrollLeft();
        //网页被卷去的高
        mytop = $(document).scrollTop();
        $("#overlay").css({ "left": myleft, "top": mytop });
    });
});
/* 当前页面高度 */
function pageHeight() {
    //return document.body.scrollHeight;
    return window.availHeight;
}
/* 当前页面宽度 */
function pageWidth() {
    //return document.body.scrollWidth;
    return window.availWidth;
}
/* 显示遮罩层 */
function showOverlay() {
    $("#overlay").height(pageHeight());
    $("#overlay").width(pageWidth());
    // fadeTo第一个参数为速度,第二个为透明度
    // 多重方式控制透明度,保证兼容性,但也带来修改麻烦的问题
    $("#overlay").fadeTo(200, 0.5);
    //为遮罩内容层添加样式
    $("#loginFrame").css("display","block");
    $("#loginFrame").addClass("MyAlertBox");
    //为遮罩层关闭按钮添加样式
    $("#closeBtn").css("display","block");
    $("#closeBtn").addClass("closeBtn");
}
/* 隐藏遮罩层 */
function hideOverlay() {
    $("#overlay").fadeOut(200);
    $("#loginFrame").css("display","none");
    $("#closeBtn").css("display","none");
}
//浏览器视口的高度
function windowHeight() {
    var de = document.documentElement;
    return self.innerHeight || (de && de.clientHeight)
            || document.body.clientHeight;
}
//浏览器视口的宽度
function windowWidth() {
    var de = document.documentElement;
    return self.innerWidth || (de && de.clientWidth)
            || document.body.clientWidth
}
/* 浏览器垂直滚动位置 */
function scrollY() {
    var de = document.documentElement;
    return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
}
/* 浏览器水平滚动位置 */
function scrollX() {
    var de = document.documentElement;
    return self.pageXOffset || (de && de.scrollLeft)
            || document.body.scrollLeft;
}
/* 定位到页面中心 */
function adjust(id) {
    var w = $("#"+id).width();
    var h = $("#"+id).height();
    var t = scrollY() + (windowHeight() / 2) - (h / 2);
    var l = scrollX() + (windowWidth() / 2) - (w / 2);
    $("#"+id).css( {
        left : l + 'px',
        top : t + 'px'
    });
}
</script>

到此,相信大家对“怎么用js+css实现div遮罩层效果”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. js+css如何实现红包雨效果
  2. js+css实现打字效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

div css

上一篇:Vue如何换肤

下一篇:ReactNative如何实现Toast

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》