jq给页面添加覆盖层遮罩

最新推荐文章于 2023-12-08 16:42:56 发布

joyhen

最新推荐文章于 2023-12-08 16:42:56 发布

阅读量8.5k

点赞数 2

分类专栏： Javascript 文章标签：遮罩层

本文链接：https://blog.csdn.net/Joyhen/article/details/38725383

版权

Javascript 专栏收录该内容

65 篇文章 1 订阅

订阅专栏

先引入jq代码，然后代码如下：

$(function(){
 
  var docHeight = $(document).height(); //获取窗口高度
   
  $('body').append('<div id="overlay"></div>');
   
  $('#overlay')
    .height(docHeight)
    .css({
      'opacity': .9, //透明度
      'position': 'absolute',
      'top': 0,
      'left': 0,
      'background-color': 'black',
      'width': '100%',
      'z-index': 5000 //保证这个悬浮层位于其它内容之上
    });
     
    setTimeout(function(){$('#overlay').fadeOut('slow')}, 3000); //设置3秒后覆盖层自动淡出
});