封装IOS风格弹窗案例

真小仙

已于 2023-03-25 10:27:08 修改

阅读量163

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2023-03-23 09:39:01 首次发布

本文链接：https://blog.csdn.net/m0_47380857/article/details/129724407

版权

该代码示例展示了如何使用HTML、CSS和JavaScript创建一个具有iOS风格的弹出窗口，包括动画效果。当用户点击“下载”按钮时，会显示一个包含标题、消息和确认按钮的弹窗。点击按钮后，弹窗会淡出并从页面中移除。

摘要由CSDN通过智能技术生成

效果:

效果:

<!DOCTYPE html>
<html>
<head>
  <title>iOS风格弹窗口</title>

  <style type="text/css">
    

    .alert-box {
      position: fixed;
      top: 50%;
      left: 50%;
      width: 280px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
      padding: 20px;
      text-align: center;

      /* 添加 transform 和 transition 属性 */
      transform: scale(0);
      opacity: 0; /* 将 opacity 设置为 0，使其不可见 */
      transition: all 0.3s ease;
    }

    .alert-box.show {
      /* 添加 show 类，将 transform 大小重置为 1，并将 opacity 设置为 1 */
      transform: scale(1);
      opacity: 1;
    }

    .alert-box h2 {
      margin-top: 0;
      font-size: 24px;
    }

    .alert-box p {
      margin-bottom: 20px;
      color: #555;
    }

    .alert-box button {
      display: block;
      margin: 0 auto;
      border: none;
      background-color: #00aaff;
      color: #fff;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      transition: all 0.3s ease;
    }

    .alert-box button:hover {
      background-color: #4a8dfa;
    }
  </style>

</head>
<body>

	
  <button onclick="showAlert('提示','下载成功')">下载</button>

  <script type="text/javascript">
    function showAlert(title, message) {
      // 创建一个带有标题、消息文本和确认按钮的 <div> 元素
      var alertBox = document.createElement("div");
      alertBox.setAttribute("class", "alert-box");

      var alertTitle = document.createElement("h2");
      alertTitle.innerHTML = title;
      alertBox.appendChild(alertTitle);

      var alertMessage = document.createElement("p");
      alertMessage.innerHTML = message;
      alertBox.appendChild(alertMessage);

      var alertButton = document.createElement("button");
      alertButton.innerHTML = "OK";
      alertButton.onclick = function() {
        // 在 alertBox 上移除 show 类
        alertBox.classList.remove("show");

        // 等待动画完成之后再将 alertBox 从页面中删除
        setTimeout(function() {
          document.body.removeChild(alertBox);
        }, 300); // 等待 0.3 秒，即动画持续时间
      };
      alertBox.appendChild(alertButton);

      // 将 show 类添加到 alertBox
      alertBox.classList.add("show");

      // 将 alertBox 添加到页面中
      document.body.appendChild(alertBox);

      // 等待 0.3 秒，即动画持续时间，执行其他操作
      setTimeout(function() {
        // Do something after animation
      }, 300);
    }
  </script>

</body>
</html>