js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)

下面我会详细讲解“js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)”的完整攻略。

1. 实现思路

首先,要实现遮罩居中弹出层,我们需要使用CSS实现弹出层的样式,用JS实现弹出层的位置和滚动条滚动的效果。具体步骤如下:

  1. 定义一个遮罩层的样式mask,设置background为半透明的黑色,并将它的z-index设为比页面上其他元素的z-index要高。
  2. 定义一个弹出层的样式dialog,设置positionfixedlefttop都为50%,即把它放在屏幕的中央位置。
  3. 使用JavaScript为弹出层定位,通过offsetWidthoffsetHeight获取弹出层的宽度和高度。同时,使用scrollHeightscrollTop可以获取页面的滚动高度。这样就可以让弹出层跟着页面滚动条滚动。

2. 示例说明

示例一

我们以一个简单的登录框为例,来演示如何实现遮罩居中弹出层。

<!-- HTML代码 -->
<button id="showBtn">显示登录框</button>
<div id="mask"></div>
<div id="dialog">
  <h3>登录</h3>
  <form>
    <label>用户名:</label>
    <input type="text" name="username">
    <br>
    <label>密码:</label>
    <input type="password" name="password">
    <br>
    <button type="submit">登录</button>
  </form>
</div>
/* CSS代码 */
#mask {
  display:none;
  position:fixed;
  top:0;
  left:0;
  z-index:9999;
  background:rgba(0,0,0,0.5); 
}

#dialog {
  display:none;
  position:fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  width:300px;
  height:200px;
  z-index:10000;
  background-color:#fff;
  padding:20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  text-align:center;
}
// JavaScript代码
window.onload = function() {
  var showBtn = document.getElementById('showBtn');
  var dialog = document.getElementById('dialog');
  var mask = document.getElementById('mask');

  // 显示登录框
  showBtn.onclick = function() {
    mask.style.display = 'block';
    dialog.style.display = 'block';

    // 让弹出层居中
    dialog.style.marginTop = -dialog.offsetHeight/2 + 'px';
    dialog.style.marginLeft = -dialog.offsetWidth/2 + 'px';

    // 监听窗口大小改变事件,重新居中
    window.onresize = function() {
      dialog.style.marginTop = -dialog.offsetHeight/2 + 'px';
      dialog.style.marginLeft = -dialog.offsetWidth/2 + 'px';
    }

    // 监听滚动条滚动事件,让弹出层跟随滚动
    window.onscroll = function() {
      dialog.style.top = document.documentElement.scrollTop + document.documentElement.clientHeight/2 - dialog.offsetHeight/2 + 'px';
    }
  }

  // 隐藏登录框
  mask.onclick = function() {
    mask.style.display = 'none';
    dialog.style.display = 'none';
  }
}

在示例一中,我们首先定义了一个登录框的HTML代码,并使用CSS样式设置了弹出层的样式和遮罩层的样式。然后,我们使用JS实现了弹出层的居中定位及跟随滚动。最后,我们通过监听点击事件实现了点击遮罩层隐藏登录框。

示例二

下面,我们再以一个图片展示为例,来演示如何实现遮罩居中弹出层。

<!-- HTML代码 -->
<div class="container">
  <img src="https://picsum.photos/id/237/200/300" alt="图片" class="img">
  <div class="mask"></div>
  <div class="dialog">
    <img src="https://picsum.photos/id/237/400/600" alt="大图" class="big-img">
  </div>
</div>
/* CSS代码 */
.container {
  position:relative;
  margin:0 auto;
  width:200px;
  height:300px;
}

.img {
  width:100%;
  height:100%;
}

.mask {
  display:none;
  position:absolute;
  top:0;
  left:0;
  z-index:999;
  background:rgba(0,0,0,0.5); 
  width:100%;
  height:100%;
}

.dialog {
  display:none;
  position:fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  z-index:1000;
}

.big-img {
  display:block;
  max-width:80%;
  max-height:80%;
}
// JavaScript代码
window.onload = function() {
  var img = document.querySelector('.img');
  var dialog = document.querySelector('.dialog');
  var mask = document.querySelector('.mask');
  var bigImg = document.querySelector('.big-img');

  // 显示大图
  img.onclick = function() {
    mask.style.display = 'block';
    dialog.style.display = 'block';
    bigImg.src = img.src;
  }

  // 隐藏大图
  mask.onclick = function() {
    mask.style.display = 'none';
    dialog.style.display = 'none';
  }

  // 监听滚动条滚动事件,让弹出层跟随滚动
  window.onscroll = function() {
    dialog.style.top = document.documentElement.scrollTop + document.documentElement.clientHeight/2 - dialog.offsetHeight/2 + 'px';
  }
}

在示例二中,我们首先定义了一个图片的HTML代码,并使用CSS样式设置了图片、遮罩层和弹出层的样式。然后,我们使用JS实现了点击图片弹出大图,并对大图进行居中定位及跟随滚动。最后,我们通过监听点击事件实现了点击遮罩层隐藏大图。

3. 攻略总结

通过以上示例,我们可以总结出JS+CSS实现遮罩居中弹出层(随浏览器窗口滚动条滚动)的攻略:

  1. 首先,使用CSS样式设置遮罩层和弹出层的样式。
  2. 然后,使用JS实现弹出层的居中定位及跟随滚动。
  3. 最后,通过监听点击事件实现了点击遮罩层隐藏弹出层。

这样就可以实现一个完美的遮罩居中弹出层了。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 浅谈CSS潜藏着的BFC

    浅谈CSS潜藏着的BFC – 完整攻略 什么是BFC BFC的全称为Block Formatting Context,即块级格式化上下文。它是CSS中的一种渲染模式,是一个独立的渲染区域,BFC中的元素在布局时只会考虑位于同一BFC中的元素。 BFC的原理 BFC的形成有以下几种情况: 根元素或包含它的元素。 设置 float、position: absol…

    css 2023年6月10日
    00
  • HTML5 Canvas绘制文本及图片的基础教程

    HTML5 Canvas是一种Web绘图标准,它允许我们以编程方式绘制2D图形和动画。其中,绘制文本和图片也是非常常见的需求,下面我们就来详细讲解“HTML5 Canvas绘制文本及图片的基础教程”。 基本准备 在使用Canvas绘制文本和图片之前,需要先在HTML页面中添加一个Canvas元素,如下: <canvas id="myCanva…

    css 2023年6月11日
    00
  • Vue项目中使用mock.js的完整步骤

    下面我将为你详细讲解Vue项目中使用mock.js的完整步骤: 安装Mock.js和axios 在Vue项目中,安装Mock.js和axios很简单,只需要在终端执行以下命令: npm install mockjs axios –save-dev 创建mock数据 在Vue项目根目录下创建一个mock文件夹,用于存放模拟数据。在该文件夹下创建一个mock.…

    css 2023年6月10日
    00
  • css实现中间文字两边横线效果

    要实现中间文字两边横线的效果,可以使用CSS中的伪元素 ::before 和 ::after,以及border-bottom实现。具体的实现方式如下: 首先需要在HTML中添加需要添加效果的元素,例如下面的代码,我们在h1标签中添加示例文本: <h1>This is an example text</h1> 然后,在CSS中为该元素添…

    css 2023年6月10日
    00
  • CSS实现元素居中原理解析

    CSS实现元素居中有多种方法,下面将逐一介绍以及加以分析。 1. 相对定位 + 负偏移 在HTML中,我们可以为需要居中的元素设置相对定位(position: relative;), 然后通过负偏移(top: -50%; left: -50%;)将元素移动到其外层容器的正中心。 .container { position: relative; } .cent…

    css 2023年6月10日
    00
  • 用ASP.NET实现下载远程图片保存到本地的方法 保存抓取远程图片的方法

    ASP.NET 实现下载远程图片保存到本地的方法 有时候我们需要将远程的图片保存到本地,那么该怎么做呢?下面我们将介绍如何用 ASP.NET 实现下载远程图片并保存到本地的方法。 步骤1:获取远程图片的URL 由于我们需要下载远程图片,所以首先需要获取远程图片的 URL。可以通过爬虫等方式获取,也可以手动输入 URL。 步骤2:下载远程图片 下载远程图片可以…

    css 2023年6月11日
    00
  • CSS技巧之圆角背景与三角形实现方法

    关于“CSS技巧之圆角背景与三角形实现方法”的完整攻略,我将从以下几个方面进行详细讲解: 圆角背景的实现方法 三角形的实现方法 示例说明 1. 圆角背景的实现方法 1.1 border-radius属性 CSS3中提供了border-radius属性,可以非常简单的实现圆角背景效果。border-radius属性有四个参数,分别对应左上角、右上角、右下角和左…

    css 2023年6月9日
    00
  • css 实现圆形渐变进度条效果的示例代码

    下面我来详细讲解如何使用 CSS 实现圆形渐变进度条效果的完整攻略。 1. 实现思路 首先,我们需要了解如何使用 CSS 绘制圆形。 CSS 中可以通过设置圆形元素的 border-radius 属性来实现圆形。我们可以将元素的 width 和 height 属性设置为相等的值,再把 border-radius 设置为一半的值,就能够绘制出一个完整的圆形了。…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部