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 line-height属性的使用技巧

    当我们在设计网页时,使用CSS来控制文本显示是非常重要的。其中,line-height属性可以帮助我们控制文本的行间距,进而影响到整个网页的排版效果。在这里,我将详细讲解“CSS line-height属性的使用技巧”这个话题。 line-height的基本用法 line-height属性用于指定行高。它可以使用像素值、百分比值、em值等多个单位进行设置。在…

    css 2023年6月10日
    00
  • css中:last-child不生效的解决方法

    CSS 中的 :last-child 伪类选择器是指选择一组元素中的最后一个子元素,可以用于设置最后一个子元素的样式。但是有时候会出现 :last-child 伪类选择器不生效的情况,接下来就来讲解一下解决方法。 解决方法 1. 确认选择器的使用位置 当我们在网页中使用 :last-child 伪类选择器时,需要注意选择器的使用位置。last-child 选…

    css 2023年6月9日
    00
  • JS实现div内部的文字或图片自动循环滚动代码

    实现div内部的文字或图片自动循环滚动,可以使用JavaScript来实现。下面是实现的完整攻略: 1. 准备工作 首先需要一个包含滚动内容的div容器,例如: <div id="scroll-container"> <ul> <li><img src="img1.jpg" a…

    css 2023年6月10日
    00
  • 图片下面出现空白像素BUG的常用解决方法归纳

    图片下面出现空白像素BUG的常用解决方法归纳 在网页开发中,我们经常会遇到图片下面出现空白像素的问题,具体表现为,图片下方会出现一些看似没有任何内容的空白像素,这不仅影响页面的美观度,还会影响排版的准确性。在本文中,我们将会介绍一些常见的解决方法,以帮助大家快速地解决这个问题。 方法一:使用display:block 将图片的display属性设置为bloc…

    css 2023年6月10日
    00
  • vue如何引用其他组件(css和js)

    Vue如何引用其他组件(CSS和JS) 在Vue中,可以通过<script>和<style>标签来引用其他组件的CSS和JS文件。本攻略将详细讲解Vue如何引用其他组件的CSS和JS文件,包括基本概念、属性介绍、注意事项和示例说明。 1. 基本概念 在Vue中,可以通过<script>和<style>标签来引用…

    css 2023年5月18日
    00
  • js实现弹窗插件功能实例代码分享

    JS实现弹窗插件功能是一个非常常见也是较为基础的前端开发技能,在本篇攻略中,我们将讨论实现弹窗插件的步骤,并提供两个示例说明。 一、实现弹窗插件的基本思路 实现弹窗插件的基本思路可以分为以下几步: 编写HTML、CSS和JS代码,分别定义弹窗模板,弹窗样式和弹窗功能; 使用JS代码绑定事件,当用户点击需要弹窗的元素时,触发弹窗功能; 使用JS代码动态生成弹窗…

    css 2023年6月10日
    00
  • CSS定义鼠标经过时鼠标图形的十五种样式整理

    下面将为您详细讲解“CSS定义鼠标经过时鼠标图形的十五种样式整理”的完整攻略。 什么是CSS定义鼠标经过时鼠标图形的样式? CSS定义鼠标经过时鼠标图形的样式,顾名思义,就是在鼠标经过某个元素时改变鼠标的样式。这在网页设计中是非常重要的,能够让用户提高交互性和体验感。 如何定义鼠标经过时鼠标图形的样式? 在CSS中,定义鼠标经过时鼠标图形的样式,可以使用以下…

    css 2023年6月10日
    00
  • CSS中Single Div 绘图技巧的实现

    CSS中的Single Div绘图技巧是一种极具创意和技巧性的CSS绘图方法,是利用一个元素(div)的伪元素(::before和::after)来绘制出复杂的图形。以下是Single Div绘图技巧的实现攻略: 1. 了解CSS中伪元素的使用方法 在CSS中,伪元素如::before和::after可以用来在一个元素前面或后面插入内容,这些内容与元素的内容…

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