css模态框

最新推荐文章于 2024-07-12 18:49:24 发布

lalaxuan

最新推荐文章于 2024-07-12 18:49:24 发布

阅读量271

点赞数 1

分类专栏： CSS好玩的案例文章标签： css html javascript

本文链接：https://blog.csdn.net/weixin_45732235/article/details/124945104

版权

CSS好玩的案例专栏收录该内容

7 篇文章 1 订阅

订阅专栏

实现效果:

在这里插入图片描述

源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="container">
    <header class="top-banner">
      <div class="top-banner-inner">
        <p>With a young heart, do what your husband should do
          <!-- 触发弹窗的按钮 -->
          <button id="open">Sign up</button>
        </p>
      </div>
    </header>

    <!-- 模态框容器 -->
    <div class="modal" id="modal">
      <!-- 模态框后面遮挡网页内容的蒙层 -->
      <div class="modal-backdrop"></div>
      <!-- 模态框内容 -->
      <div class="modal-body">
        <button class="modal-close" id="close">close</button>
        <h2>Wombat Nwesletter</h2>
        <p>Sign up for our monthly newsletter.No spam.
          We Promise!
        </p>

        <form>
          <p>
            <label for="email">Email address:</label>
            <input type="email" name="email">
          </p>
          <p><button type="submit">Submit</button></p>
        </form>
      </div>
    </div>
  </div>

  <!-- js -->
  <script>
    var button = document.querySelector('#open');
    var close = document.querySelector('#close');
    var modal = document.querySelector('#modal');
    
    // 当用户点击sign up按钮时打开模态框
    button.addEventListener('click', function(e) {
      e.preventDefault();
      modal.style.display = 'block';
    });

    // 当用户点击close按钮时关闭模态框
    close.addEventListener('click', function(e) {
      e.preventDefault();
      modal.style.display = 'none';
    })
  </script>
</body>
</html>

:root {
  box-sizing: border-box;
}
*,
::before,
::after {
  box-sizing: inherit;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  /* 设置网页高度，让页面出现滚动条 只是为了演示 */
  min-height: 200vh;
  margin: 0;
}

button {
  padding: 0.5em 0.7em;
  border: 1px solid #8d8d8d;
  background-color: white;
  font-size: 1em;
}

.top-banner {
  padding: 1em 0;
  background-color: #ffd698;
}

.top-banner-inner {
  width: 80%;
  max-width: 1000px;
  margin: 0 auto;
}

.modal {
  /* 默认隐藏模态框 当要打开模态框的时候，js会设置display:block; */
  display: none;
}

/* 当打开模态框的时候，用半透明的蒙层遮挡网页剩余内容 */
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  background-color: rgba(0, 0, 0, 0.5);
}


.modal-body {
  /* 给模态框的主体定位 */
  position: fixed;
  top: 3em;
  bottom: 3em;
  right: 20%;
  left: 20%;
  padding: 2em 3em;
  background-color: white;
  /* 允许模态框主体在需要时滚动 */
  overflow: auto;
}

.modal-close {
  position: absolute;
  top: 0.3em;
  right: 0.3em;
  padding: 0.3em;
  cursor: pointer;
  /* 让按钮变成一个小正方形 */
  font-size: 2em;
  height: 1em;
  width: 1em;
  /* 让文字里的文字溢出并隐藏 */
  text-indent: 10em;
  overflow: hidden;
  border: 0;
}

.modal-close::after {
  position: absolute;
  line-height: 0.5;
  top: 0.2em;
  left: 0.1em;
  text-indent: 0;
  content: "\00D7";
}