打开视频弹窗时缺少关闭按钮问题求助

以下是我用到的HTML代码：

<div class="swiper-wrapper">
    <div class="g-fullheight--xs g-bg-position--center swiper-slide" style="background: url('img/1920x1080/02.jpg');">
        <div class="container g-text-center--xs g-ver-center--xs">
            <div class="g-margin-b-30--xs">
                <h1 class="g-font-size-35--xs g-font-size-45--sm g-font-size-55--md g-color--white">More Experience<br>That Inspires Us</h1>
                <a class="js__popup__video" href="video popup/123.mp4" title="Intro Video">
                    <i class="s-icon s-icon--lg s-icon--white-bg g-radius--circle ti-control-play"></i>
                </a>
                <div data-aos="fade-up">                        
                </div>
            </div>
        </div>
    </div>

以及CSS代码：

/* Video v2 */
.s-video-v2__bg {
  position: absolute;
}

.s-video-v2__bg:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: rgba(34, 35, 36, 0.85);
  content: " ";
}

我尝试过编写一些代码，但仍无法在视频弹窗中显示[x]关闭按钮，恳请各位提供帮助。

此致，
Avaron

解决方法 #

1. 检查弹窗插件配置

你用的js__popup__video属于弹窗插件触发类（比如Magnific Popup、LightGallery），先确认：

• 插件是否默认包含关闭按钮，初始化时是否开启相关配置（比如Magnific Popup的closeBtnInside: true）；
• 插件的官方CSS文件是否正确引入，里面包含关闭按钮的基础样式。

2. 手动添加关闭按钮

如果插件无自带样式或样式丢失，可手动添加元素：

<!-- 在弹窗容器内插入关闭按钮 -->
<button class="popup-close">&times;</button>

添加对应CSS确保显示位置正确：

.popup-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  z-index: 10; /* 高于遮罩层z-index */
  border-radius: 50%;
}

.popup-close:hover {
  background: rgba(0,0,0,0.8);
}

3. 绑定关闭事件

如果是自定义弹窗，给按钮添加关闭逻辑：

document.querySelector('.popup-close').addEventListener('click', function() {
  // 隐藏弹窗容器
  document.querySelector('.your-popup-container').style.display = 'none';
  // 暂停视频播放
  document.querySelector('.popup-video').pause();
});

4. 排查层级冲突

你的.s-video-v2__bg:before设置了z-index:1，如果关闭按钮z-index低于该值会被遮罩层挡住，需将按钮z-index设为更高数值（比如z-index:10）。

内容的提问来源于stack exchange，提问作者Avaronesia Inc