主页 / coding / 问题 / 78826821
Accepted
Jake Shaw
Asked: 2024-08-03 02:37:23 +0800 CST

有没有办法可以使用 CSS 制作覆盖层、重新定位关闭按钮，然后点击任意位置即可关闭弹出框？

  • 772

我已经能够在此弹出框上创建大多数元素，但我发现在打开弹出框时创建深色背景覆盖非常困难。还可以将“关闭”按钮重新定位到弹出框内的右上角。最后，点击弹出框外的任意位置即可关闭弹出窗口。有没有办法用 CSS 实现这一点？

这正是我想要的

这就是我能做的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">

<style>
body {
    background-color: #b0b0b0  !important;
}

.txtrmv {
    position: absolute !important;
    border: none !important;
    font-size: 20px !important;
    color: white !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
}

</style>
</head>
<body>
<br><br><br><br><br>
  <a class="trigger_sb_divi_modal template-pop trigger_template-31291 cboxElement txtrmv"
            data-href="#template-31291">&#x5B;CLICK TO SHOW VIDEO&#x5D;</a>

            <div style="display:none;">
              <div class="sb_divi_modal" id="template-31291">
                <div class="container-popup">
                  <div class="video-wrap">
                    <video src="https://btcscriptsmaker.com/Testvideo1.mp4" controls="" muted="muted"
                    preload="none" class="image fit" style=
                    "width: 100%; visibility: visible;"></video>
                  </div>
                </div>
              </div>
            </div>

  <script src="https://btcscript.net/assets/js/jqscript.js" type=
  "d9698a347787f66e577c9a00-text/javascript"></script>
  <script src=
  "https://btcscript.net/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js"
  data-cf-settings="d9698a347787f66e577c9a00-|49" defer></script>
</body>
</html>
javascript

1 个回答

  1. Best Answer

    编辑：

    您可以在窗口元素上使用点击事件监听器，并使用条件检查点击了哪个元素，确保事件目标不是视频元素或打开模式按钮。 .video-wrap .cboxElement

    然后为了移动按钮，我们可以将按钮元素的位置设置为absolute，并使用top和right将其定位在其最近的父元素内，位置为relative。

    对于背景，在showVideo()方法中我们可以创建一个元素，分配一个使用添加 alpha 通道的类rgba(0,0,0,0.7)，然后将该元素附加到body。还可以切换按钮元素的显示以使用 css 中的辅助类，以便在显示视频时隐藏按钮。display:none

    然后在closeVideoModal()方法中，我们可以从 DOM 中删除背景元素，并切换辅助类以再次显示显示视频按钮。

    我更新了代码片段，添加了新的注释，解释了所有使用的代码（包括 JS 和 CSS）。如果有任何不清楚的地方，请告诉我。

    const btn = document.querySelector('.cboxElement');
const videoWrap = document.querySelector('.video-wrap');

const closeVideoModal = (e) => { 
    // if colorBox elements display is block AND 
  if (colorbox.style.display === 'block' &&
      // the event targets class list does not contain 
      // the video's class 'video-wrap' -> the video AND
    !e.target.classList.contains('video-wrap') &&
      // the event targets class list does not contain 'cboxElement' - the button
    !e.target.classList.contains('cboxElement')) {
        // then we get the videos container and set its display style to 'none'
      document.getElementById('colorbox').style.display = 'none';
        // we remove the background element
      document.querySelector('.bg').remove();
        // remove the helper class from the button element so it will show up in the DOM
      btn.classList.remove('none');
  } 
}

// method to show the video used on the cboxElements event listener
const showVideo = () => {
      // create a div element
    const bg = document.createElement('div');
      // assign a class of bg tot he classList
    bg.classList.add('bg');
      // append this element to the body 
    document.body.append(bg);
      // add helper class to hide the button
    btn.classList.add('none');
      // show the video using inline style as the JS you use initially is inline
    document.getElementById('colorbox').style.display = 'block';
}

// event listeners on window element, pass in the event -> `e` 
// and check it in the closeVideoModal(e) method/function to see what element was clicked
window.addEventListener('click', closeVideoModal);
// cboxElement button event listener to show the #colorbox parent element
btn.addEventListener('click', showVideo);
    /* added body position relative to make any child elements relativce to the body */
body {
  position: relative;
  /* reset margin on body */
  margin: 0;
}

/* the background element we add in JS */
.bg {
  /* set to black and give it an alpha of 0.7 */
  background-color: rgba(0, 0, 0, 0.7);
  /* fix the position to the view port */
  position: fixed;
  /* set the width and height to 100 view port measurements */
  width: 100vw;
  height: 100vh;
  /* position using top and left */
  top: 0;
  bottom: 0;
  /* reset any padding or margin */
  padding: 0;
  margin: 0;
  /* push z-index back so background is behind the video element */
  z-index: -1;
}

/* set position of close button to absolute and then position using top and right */
#cboxClose {
  position: absolute;
  top: 0;
  right: -1.5rem;
}

.cboxElement {
  /* set position to absolute and take the element out of document flow */
  position: absolute;
  /* position using top and right */
  left: 1rem;
  top: 1rem;
}

/* helper class used to show/hide any element with .none in classList */
.none {
  display: none;
}
    <a class="trigger_sb_divi_modal template-pop trigger_template-31291 cboxElement txtrmv" data-href="#template-31291">&#x5B;CLICK TO SHOW VIDEO&#x5D;</a>

<div class="cont" style="display:none;">
  <div class="sb_divi_modal" id="template-31291">
    <div class="container-popup">
      <div class="video-wrap">
        <video src="https://btcscriptsmaker.com/Testvideo1.mp4" controls="" muted="muted" preload="none" class="image fit" style="width: 100%; visibility: visible;"></video>
      </div>
    </div>
  </div>
</div>

<script src="https://btcscript.net/assets/js/jqscript.js" type="d9698a347787f66e577c9a00-text/javascript"></script>
<script src="https://btcscript.net/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="d9698a347787f66e577c9a00-|49" defer></script>

    • 0

相关问题