1. Python技术站首页
  2. css

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

• css
yizhihongxing

下面我将详细讲解“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日

相关文章

  • jqPlot jquery的页面图表绘制工具

    下面是关于jqPlot的详细讲解。 jqPlot简介 jqPlot是一个使用jQuery和Canvas绘制图表的轻量级插件。支持多种类型的图表，包括折线图、柱状图、饼图等。它提供了丰富的自定义选项，可以轻松地设置各种图表的样式和设置。 如何使用jqPlot 1. 引入jqPlot文件 首先需要将jqPlot的文件引入到你的网站中，包括jquery.min.j…

    css 2023年6月10日
    00

  • Swiper自定义分页器使用详解

    Swiper自定义分页器是Swiper插件中的一个重要功能，它可以让我们以更加个性化和自由的方式展示分页器的样式和数量。下面是使用Swiper自定义分页器的完整攻略。 1. 引入Swiper插件 在使用Swiper自定义分页器之前，首先需要引入Swiper插件的代码。可以通过CDN引入或下载Swiper文件到本地，然后在页面中引入。 示例代码： <he…

    css 2023年6月9日
    00

  • css控制div鼠标放上去变色

    下面我将详细讲解如何使用CSS来控制鼠标悬浮在<div>元素上时进行背景色变换的步骤和方法。 1. 选择器 首先，我们需要选择要控制的<div>元素。可以使用CSS选择器来选择要控制的元素。常用的选择器有： 标签选择器（tag selector）：通过HTML标签名选中所有该标签的元素。如：div。 类选择器（class select…

    css 2023年6月10日
    00

  • ie6不支持hover ie6 标签(除a标签)不支持伪类:hover解决方案

    首先，我们需要了解一下IE6的特性。IE6不支持使用:hover选择器来设定除了a标签以外的标签的样式。这意味着我们需要采用其他的解决方案来解决这个问题。 其中一种解决方案是通过使用JavaScript来实现hover效果。具体步骤如下： 引入jQuery库 在网页头部引入jQuery库： <script src="https://cdnjs…

    css 2023年6月9日
    00

  • flex中使用css样式修改TextArea滚动条的皮肤代码

    下面是关于如何使用CSS样式修改 Flex 中 TextArea 滚动条的皮肤的攻略： 1. 使用基本的CSS样式类 要修改 TextArea 滚动条皮肤，首先需要使用 Flex 中已经定义的基本 CSS 样式类。以下是一个基本的示例： <fx:Style> .scrollTrack { backgroundColor: #FFFFFF; bor…

    css 2023年6月10日
    00

  • 纯CSS绘制三角形箭头效果

    在网页前端开发中，使用纯 CSS 绘制三角形箭头效果是一项非常有用的技能。下面是一个完整的攻略，包含了绘制三角形箭头的过程和两个示例说明。 绘制三角形箭头的过程 1. 创建 HTML 结构 首先，我们需要创建一个 HTML 结构，用于容纳三角形箭头。下面是一个简单的 HTML 结构示例： <div class="arrow">…

    css 2023年5月18日
    00

  • css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

    请看下面的详细讲解。 CSS设置滚动条颜色与样式 设置滚动条颜色 要设置滚动条的颜色，我们需要使用伪元素::-webkit-scrollbar，再用background-color属性设置滚动条的背景颜色，用thumb伪元素来设置滚动条的滑块颜色。 /* 设置滚动条的背景颜色 */ ::-webkit-scrollbar { background-color…

    css 2023年6月9日
    00

  • CSS实现超级链接需要通过双击后跳转

    要实现“CSS实现超级链接需要通过双击后跳转”，我们可以利用CSS中的:hover伪类和JavaScript来实现。 以下为示例说明： 利用JavaScript实现双击跳转 在html中添加一个链接元素，并设置id属性，如下所示： <a id="mylink" href="https://www.example.com&q…

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