html无限弹窗代码6

楚文滨 2周前 16浏览 0评论

HTML无限弹窗代码6，是一种弹出多个对话框的技术，非常适用于网站广告、弹窗活动等场合。通过使用pre标签来显示代码，使其更易读，下面是代码实现的详细解析：

<!DOCTYPE html>
<html>
  <head>
    <title>HTML无限弹窗代码6</title>
    <style>
      .popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        display: none;
      }
      .popup-content {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        padding: 30px;
        border-radius: 5px;
        box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.3);
        z-index: 10000;
        display: none;
      }
      .popup-close {
        position: absolute;
        top: 5px;
        right: 5px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button id="open-popup">Show Popup</button>
    <div class="popup-overlay"></div>
    <div class="popup-content">
      <img src="https://via.placeholder.com/350x150" alt="popup image">
      <p>Popup content goes here.</p>
      <span class="popup-close">&times;</span>
    </div>
    <script>
      var openPopup = document.getElementById('open-popup');
      var closePopup = document.querySelector('.popup-close');
      var popupOverlay = document.querySelector('.popup-overlay');
      var popupContent = document.querySelector('.popup-content');
      
      openPopup.addEventListener('click', function() {
        popupOverlay.style.display = 'block';
        popupContent.style.display = 'block';
      });
      
      closePopup.addEventListener('click', function() {
        popupOverlay.style.display = 'none';
        popupContent.style.display = 'none';
      });
      
      popupOverlay.addEventListener('click', function() {
        popupOverlay.style.display = 'none';
        popupContent.style.display = 'none';
      });
    </script>
  </body>
</html>

以上代码实现了一个基本的无限弹窗，其中包括了一个显示弹窗的按钮以及弹窗中的图片、内容和关闭按钮。使用CSS的position属性和z-index属性来让弹窗覆盖在页面的最上层，并利用display属性来控制其显示和隐藏。通过JavaScript来实现点击显示按钮、关闭按钮或弹窗外空白处时，弹窗的显示和隐藏。这个代码基础简单，易于修改和扩展，如果需要制作多个弹窗，只需要在HTML和JavaScript中复制粘贴相应的代码，并调整一些参数就行了。

上一篇 python3 迭代器

下一篇 html日历记事本代码

网站导航

网站导航

最近发表

文章归档

html无限弹窗代码6