html制作弹出框代码

HTML作为前端开发中的基础语言之一，能够实现许多网站界面中必不可少的交互效果，其中弹出框便是一个常见的组件。接下来，我们来介绍一下HTML中如何制作弹出框。

代码如下：
<!DOCTYPE html>
<html>
<head>
  <title>html制作弹出框</title>
  <style>
    /* 弹出框样式 */
    #popup {
      position: fixed; /* 绝对定位 */
      top: 50%; /* 垂直居中 */
      left: 50%; /* 水平居中 */
      transform: translate(-50%,-50%); /* 水平垂直都居中 */
      background-color: white; /* 背景色为白色 */
      border: 1px solid #ddd; /* 边框为灰色 */
      padding: 30px; /* 内边距为30px */
      Box-shadow: 0 10px 20px rgba(0,0.2); /* 添加阴影效果 */
      display: none; /* 默认不显示 */
    }
    /* 遮罩层样式 */
    #mask {
      position: fixed; /* 绝对定位 */
      top: 0; /* 顶部到达最上面 */
      left: 0; /* 左侧到达最左面 */
      width: 100%; /* 遮罩层铺满页面 */
      height: 100%; /* 遮罩层铺满页面 */
      background-color: rgba(0,0.5); /* 背景色为半透明黑色 */
      display: none; /* 默认不显示 */
    }
  </style>
</head>
<body>
  <button onclick="showPop()">点击打开弹出框</button>
  <div id="popup">
    <h2>这是一个弹出框</h2>
    <p>点击"关闭"可以关闭这个弹出框</p>
    <button onclick="hidePop()">关闭</button>
  </div>
  <div id="mask"></div>
  <script>
    function showPop() {
      document.getElementById("popup").style.display="block";
      document.getElementById("mask").style.display="block";
    }
    function hidePop() {
      document.getElementById("popup").style.display="none";
      document.getElementById("mask").style.display="none";
    }
  </script>
</body>
</html>

@H_502_5@ html制作弹出框代码

在上述代码中，首先定义了一个弹出框的样式以及一个遮罩层的样式，并将它们的display属性设置为none，表示一开始不显示。接着，在HTML结构中添加了一个按钮，当点击这个按钮时，调用showPop函数，将弹出框和遮罩层的display属性都设置为block，从而实现弹出框的显示。弹出框中同样设有一个关闭按钮，当点击这个按钮时，调用hidePop函数，将弹出框和遮罩层的display属性都设置为none，从而实现弹出框的关闭。

html制作弹出框代码

相关推荐