当前位置：MASUC > 教程 > 一个简简单单的弹窗提示代码
阿西吧阿西吧 教程

一个简简单单的弹窗提示代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    /* 弹窗样式 */
    .popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      max-width: 480px;
      background-color: #f9f9f9;
      border: 1px solid #ccc;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.76);
      z-index: 9999;
      display: none;
      border-radius: 5px;
      text-align: center; /* 居中文本内容 */
    }
    
    /* 关闭按钮样式 */
    .close {
      float: right;
      cursor: pointer;
      font-size: 25px;
      margin-right: -10px;
      margin-top: -20px;
      transition: transform 0.3s; /* 添加过渡效果 */
    }
    
    /* 悬浮效果 */
    .close:hover {
      transform: rotate(90deg); /* 鼠标悬浮时旋转90度 */
    }
    
    /* 标题样式 */
    .title {
      font-size: 24px;
      font-weight: bold;
      margin-top: 0px;
      margin-bottom: 30px;
    }
    
    /* 确定按钮样式 */
    .button {
      display: inline-block;
      padding: 8px 16px;
      background-color: #4e5ed4;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    
    /* 蒙版样式 */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 9998;
      display: none;
    }
    
    /* 媒体查询 - 手机屏幕 */
    @media (max-width: 600px) {
      .popup {
        width: 80%;
      }
    }
  </style>
</head>
<body>
  <div class="overlay" id="overlay"></div>
  <div class="popup" id="popup">
    <span class="close" onclick="closePopup()">&times;</span>
    <h2 class="title">友情提示</h2>
    <p>提供Mac版本但不推荐M系列芯片的苹果电脑安装，兼容性差问题多</p>
    <p>提供三种系统版本和三个下载方式进行下载</p>
    <p>如自行安装有问题或者需要其他技术支持请点击右下角进行联系</p>
    <p>可远程安装Ubuntu+ROS，支持ubuntu18/20版本安装ROS</p>
    <button class="button" onclick="closePopup()">确定</button>
  </div>

  <script>
    // 显示弹窗
    function showPopup() {
      var popup = document.getElementById('popup');
      var overlay = document.getElementById('overlay');
      popup.style.display = 'block';
      overlay.style.display = 'block';
    }

    // 关闭弹窗
    function closePopup() {
      var popup = document.getElementById('popup');
      var overlay = document.getElementById('overlay');
      popup.style.display = 'none';
      overlay.style.display = 'none';
      // 将当前时间保存到本地存储
      var currentTime = new Date().getTime();
      localStorage.setItem('popupClosedTime', currentTime);
    }

    // 检查是否需要显示弹窗
    function checkPopup() {
      var popupClosedTime = localStorage.getItem('popupClosedTime');
      if (!popupClosedTime) {
        // 没有保存的关闭时间，显示弹窗
        showPopup();
      } else {
        var currentTime = new Date().getTime();
        var elapsedTime = currentTime - parseInt(popupClosedTime);
        var sixHours = 1 * 60 * 60 * 1000;
        if (elapsedTime >= sixHours) {
          // 超过1小时，显示弹窗
          showPopup();
        }
      }
    }

    // 页面加载完成后检查是否需要显示弹窗
    window.onload = function() {
      checkPopup();
    };
  </script>

</html>
免责声明：
1：如非特殊说明，本站对提供的素材及源码不拥有任何权利，其版权归原著者拥有。
2：本站内容均由互联网收集整理、网友上传，并且以技术研究交流为目的，仅供大家参考、学习，不存在任何商业目的与商业用途。
3：本站部分收费内容仅作本站日常维护费用，若您需要商业运营或用于其他商业活动，请您购买正版授权并合法使用。
4：请勿将源码、软件进行商业交易、转载等行为，源码、软件只为研究、学习所提供，该软件使用后发生的一切问题与本站无关。
5：站内资源如有侵犯你版权的，请来信1058364519@qq.com指出，本站将立即改正。
6：素材源码均为网络收集，不承担任何版权问题，不提供任何技术支持！
7：严重警告本站木屋模型、木屋CAD图纸、木屋效果图未经允许不得转载：凡木屋模型及CAD文章由设计师QINYUHUI设计制作，享有内容所有权，文章仅在QINYUHUI名下网站、信息平台或嘿很有内涵微博发布，未经授权违者必究！！！

MASUC » 一个简简单单的弹窗提示代码

阿西吧 SVIP

分享到：

相关推荐