1. Python技术站首页
  2. css

JS+CSS3制作炫酷的弹窗效果

• css

下面我将详细讲解“JS+CSS3制作炫酷的弹窗效果”的完整攻略。

1. 弹窗效果的实现思路

要实现弹窗效果，我们需要完成以下几个步骤：

  1. 创建一个弹窗，并设置其基本样式；
  2. 利用JavaScript控制弹窗的显示和隐藏；
  3. 利用CSS3动画效果（如transition和animation）来为弹窗添加过渡效果。

接下来，我将一步步详细讲解如何实现弹窗效果。

2. 创建基本样式

首先，我们需要创建一个基本样式。下面是一个简单的弹窗样式代码示例：

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  padding: 20px 30px;
  display: none;
}

.popup h2 {
  font-size: 18px;
  margin-bottom: 15px;
}

.popup .content {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

.popup .btn-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: block;
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: #333;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
}

上面的代码创建了一个名为“popup”的样式，其中设置了弹窗的基本样式，如位置、背景色、阴影、圆角等。此外，还设置了一个按钮样式，用于关闭弹窗。

3. 控制弹窗的显示和隐藏

接下来，我们需要通过JavaScript来控制弹窗的显示和隐藏。下面是一个简单的代码示例：

const popup = document.querySelector('.popup');
const btnOpenPopup = document.querySelector('.open-popup');
const btnClosePopup = document.querySelector('.btn-close');

// 显示弹窗
const openPopup = () => {
  popup.style.display = 'block';
};

// 隐藏弹窗
const closePopup = () => {
  popup.style.display = 'none';
};

// 点击打开按钮时显示弹窗
btnOpenPopup.addEventListener('click', openPopup);

// 点击关闭按钮或弹窗外部时隐藏弹窗
btnClosePopup.addEventListener('click', closePopup);
popup.addEventListener('click', (e) => {
  if (e.target === popup) {
    closePopup();
  }
});

上面的代码监听了打开按钮和关闭按钮的点击事件，当点击打开按钮时，调用了“openPopup”函数来显示弹窗；而当点击关闭按钮或弹窗外部时，调用了“closePopup”函数来隐藏弹窗。

4. 添加过渡效果

最后，我们可以为弹窗添加过渡效果，让它看起来更炫酷。下面是一个简单的过渡效果代码示例：

.popup {
  /* 其他样式 */
  transition: opacity 0.3s ease-in-out; /* 添加过渡效果 */
}

.popup.fade-in {
  opacity: 1;
}

.popup.fade-out {
  opacity: 0;
}

上面的代码添加了一个名为“fade-in”的样式，用于在弹窗显示时过渡渐入；同时还添加了一个名为“fade-out”的样式，用于在弹窗隐藏时过渡渐出。

在JavaScript中，我们只需要在显示和隐藏弹窗的函数中，添加或删除“fade-in”和“fade-out”样式即可实现过渡效果：

// 显示弹窗，并添加过渡效果
const openPopup = () => {
  popup.classList.add('fade-in');
  popup.style.display = 'block';
};

// 隐藏弹窗，并添加过渡效果
const closePopup = () => {
  popup.classList.add('fade-out');
  setTimeout(() => {
    popup.classList.remove('fade-out');
    popup.classList.remove('fade-in');
    popup.style.display = 'none';
  }, 300);
};

上面的代码在“openPopup”和“closePopup”函数中，通过添加和删除“fade-in”和“fade-out”样式，来为弹窗添加过渡效果。

至此，我们就完成了“JS+CSS3制作炫酷的弹窗效果”的完整攻略。

5. 示例说明

下面是两个“JS+CSS3制作炫酷的弹窗效果”的示例说明。

示例一：透明度过渡效果

这个示例的弹窗特点是透明度过渡效果，在弹窗显示和隐藏时会有一个淡出淡入的过渡效果。下面是示例代码：

<!-- HTML -->
<div class="container">
  <button class="open-popup">打开弹窗</button>
  <div class="popup">
    <h2>这是一个弹窗</h2>
    <div class="content">
      这是弹窗的内容
    </div>
    <i class="btn-close">&times;</i>
  </div>
</div>

<!-- CSS -->
<style>
  .container {
    position: relative;
    height: 100%;
  }
  .open-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    background-color: #fff;
    border: none;
    color: #333;
    cursor: pointer;
  }
  .popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 9999;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    padding: 20px 30px;
    opacity: 0;
    display: none;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  }
  .popup.fade-in {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  .popup.fade-out {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  .popup h2 {
    font-size: 18px;
    margin-bottom: 15px;
  }
  .popup .content {
    font-size: 16px;
    line-height: 1.5;
    color: #333;
  }
  .popup .btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: #333;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
  }
</style>

<!-- JavaScript -->
<script>
  const popup = document.querySelector('.popup');
  const btnOpenPopup = document.querySelector('.open-popup');
  const btnClosePopup = document.querySelector('.btn-close');

  const openPopup = () => {
    popup.classList.add('fade-in');
    popup.style.display = 'block';
  };

  const closePopup = () => {
    popup.classList.add('fade-out');
    setTimeout(() => {
      popup.classList.remove('fade-out');
      popup.classList.remove('fade-in');
      popup.style.display = 'none';
    }, 300);
  };

  btnOpenPopup.addEventListener('click', openPopup);
  btnClosePopup.addEventListener('click', closePopup);
  popup.addEventListener('click', (e) => {
    if (e.target === popup) {
      closePopup();
    }
  });
</script>

示例二：旋转效果

这个示例的弹窗特点是旋转效果，在弹窗显示和隐藏时会有一个旋转的过渡效果。下面是示例代码：

<!-- HTML -->
<div class="container">
  <button class="open-popup">打开弹窗</button>
  <div class="popup">
    <h2>这是一个弹窗</h2>
    <div class="content">
      这是弹窗的内容
    </div>
    <i class="btn-close">&times;</i>
  </div>
</div>

<!-- CSS -->
<style>
  .container {
    position: relative;
    height: 100%;
  }
  .open-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    background-color: #fff;
    border: none;
    color: #333;
    cursor: pointer;
  }
  .popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(180deg) scale(0);
    z-index: 9999;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    padding: 20px 30px;
    opacity: 0;
    display: none;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  }
  .popup.fade-in {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
  .popup.fade-out {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(180deg) scale(0);
  }
  .popup h2 {
    font-size: 18px;
    margin-bottom: 15px;
  }
  .popup .content {
    font-size: 16px;
    line-height: 1.5;
    color: #333;
  }
  .popup .btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: #333;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
  }
</style>

<!-- JavaScript -->
<script>
  const popup = document.querySelector('.popup');
  const btnOpenPopup = document.querySelector('.open-popup');
  const btnClosePopup = document.querySelector('.btn-close');

  const openPopup = () => {
    popup.classList.add('fade-in');
    popup.style.display = 'block';
  };

  const closePopup = () => {
    popup.classList.add('fade-out');
    setTimeout(() => {
      popup.classList.remove('fade-out');
      popup.classList.remove('fade-in');
      popup.style.display = 'none';
    }, 300);
  };

  btnOpenPopup.addEventListener('click', openPopup);
  btnClosePopup.addEventListener('click', closePopup);
  popup.addEventListener('click', (e) => {
    if (e.target === popup) {
      closePopup();
    }
  });
</script>

通过示例，你可以学习到如何使用不同的样式和动画效果创建出不同样式的弹窗。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS+CSS3制作炫酷的弹窗效果 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 5种做法实现table表格中的斜线表头效果

    让我来详细讲解一下“5种做法实现table表格中的斜线表头效果”的完整攻略。 什么是斜线表头效果 斜线表头效果指的是在表格的表头中，使用斜线来分隔单元格，使得表头具有更好的视觉效果和分组展示。在很多场景下，表格的斜线表头效果可以极大地提高表格的可读性和可视性。 5种实现斜线表头的方法 1. 使用 colspan 和 rowspan 属性 在 HTML 的 t…

    css 2023年6月10日
    00

  • CSS中的垂直和水平居中完全指南

    CSS中的垂直和水平居中完全指南 在网页设计中，将元素居中对齐是十分常见的需求，但实际操作中，由于不同元素的宽度和高度不同，导致垂直和水平居中的实现方法也有所不同。本篇文章将详细介绍CSS中如何实现垂直和水平居中。 水平居中 1. 行内元素的水平居中 我们通常都是通过text-align来实现行内元素水平居中，如下代码所示： .parent { text-a…

    css 2023年6月10日
    00

  • ExtJs使用总结(非常详细)

    下面我将详细讲解“ExtJs使用总结(非常详细)”的完整攻略。 一、初识ExtJs 介绍了ExtJs是什么，包括MVVM架构、组件化、丰富的UI组件等 强调了ExtJs的学习曲线很陡峭，需要花费大量的时间学习 二、ExtJs组件基础 介绍了ExtJs的组件基础知识，包括容器组件、表单组件、布局等 通过示例代码演示了如何创建容器组件和表单组件 示例一：创建容器…

    css 2023年6月10日
    00

  • 详解css清除浮动float的七种常用方法总结和兼容性处理

    关于“详解css清除浮动float的七种常用方法总结和兼容性处理”的攻略，我将会从以下几个方面进行讲解： 什么是浮动（float）？ 为什么需要清除浮动？ 清除浮动的常用方法： 使用空元素清除浮动 使用父元素清除浮动 使用父元素设置overflow属性值为hidden/clearfix 使用CSS伪类:after清除浮动 使用CSS框架清除浮动 使用CSS属…

    css 2023年6月10日
    00

  • 详解vue-flickity的fullScreen功能实现

    详解vue-flickity的fullScreen功能实现 简介 Vue-flickity 是基于 Flickity.js 的 Vue 组件库，采用了 Vue 组件编写方式，支持多种滑动方式和自定义样式，提供了许多有用的功能，其中之一就是全屏展示功能（fullScreen）。 本篇攻略将详细介绍如何在 Vue-flickity 中实现 fullScreen …

    css 2023年6月11日
    00

  • Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果

    下面是详细讲解“Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果”的完整攻略： 准备工作 首先，你需要在HTML文件中引入Bootstrap库： <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3…

    css 2023年6月11日
    00

  • css控制文字自动换行的实现方法

    关于CSS控制文字自动换行的实现方法，我可以为您提供以下攻略： 1. CSS属性word-wrap word-wrap属性用于控制超长单词的换行方式。当该属性的取值为normal时，浏览器默认采用断字法，即单词不会被自动切断。而当取值为break-word时，浏览器会在单词内部进行换行。代码示例如下： p { word-wrap: break-word; }…

    css 2023年6月10日
    00

  • CSS 关于浮动

    CSS 关于浮动的完整攻略 CSS浮动是一种常用的布局方式，它可以让元素脱离文档流并向左或向右浮动，从而实现多列布局、文字环绕图片等效果。本攻略将详细讲解CSS浮动的相关知识点，包括浮动的基本概念、浮动的属性、浮动的清除方法等，并提供两个示例说明。 1. 浮动的基本概念 浮动是CSS中的一种布局方式，它可以让元素脱离文档流并向左或向右浮动。浮动元素会尽可能地…

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