javascript - 在 Modal 中集中 iframe 并删除滚动条
问题描述
我创建了一个模态,在其中显示视频。但是,即使模式打开,我也可以拖动下面的页面。我希望当模式打开时,它会集中显示视频,并且没有向下移动页面的可能性。
模态html:
<div class="trailer">
<iframe width="854" height="480" src="https://www.youtube.com/embed/B7gyTL--1Uw" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>>
<span class="close">×</span>
</div>
CSS:
.trailer {
position: fixed;
top: 0;
left: 0;
transition: all .3s;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .9);
z-index: 9999;
}
.trailer iframe {
max-width: 900px;
outline: none;
position: relative;
}
@media only screen and (max-width:768px) {
.trailer iframe {
max-width: 100%;
}
}
javascript:
const button = document.querySelector(".button");
const close = document.querySelector(".close");
const trailer = document.querySelector(".trailer");
const iframe = document.querySelector("iframe");
button.addEventListener('click', () => {
trailer.style.visibility = "visible";
trailer.style.opacity = 1;
});
close.addEventListener('click', () => {
trailer.style.visibility = "hidden";
trailer.style.opacity = 0;
});
显示方式的图片: 在此处输入图片描述
解决方案
你知道风格的等级是脚本、内联、内部和外部吗?如果您将宽度设置为内联,则较低的等级不会影响样式。删除属性width
。
然后在脚本上,我没有看到任何类按钮.button
。所以,你会addEventListener
为空。这就像null.addEventListener
.
推荐阅读
- c++ - 如何在 C++ 中使用 MPI 而不是 C malloc/calloc 动态分配内存?
- ios - SwiftUI:如何为文本添加自定义修饰符
- php - EVP_DecryptFinal_ex:数据不是 16 字节密文上 AES-256-CBC 块长度的倍数
- android - 如何使 btnListShuffleRepeat 在 android 上工作
- safari - Safari CSP 忽略 nonce 和 unsafe-inline
- vb.net - 您将如何使用 VB.Net 通过 FTP 编辑 .txt 文件
- python-3.x - 无法在 Ubuntu 16.04 LTS 上安装 pyautogui
- laravel - Laravel - 试图获取非对象的属性“名称”(查看:C:\xampp\htdocs\jairusreport\resources\views\layouts\header.blade.php)
- java - 返回 UsbDevice 端口(或唯一值)
- python-3.x - 如何更改终端中的目录?(非常初学者的问题)