首页 > 解决方案 > 在 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">&times;</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;
    });

显示方式的图片: 在此处输入图片描述

标签: javascripthtmlcss

解决方案


你知道风格的等级是脚本、内联、内部和外部吗?如果您将宽度设置为内联,则较低的等级不会影响样式。删除属性width

然后在脚本上,我没有看到任何类按钮.button。所以,你会addEventListener为空。这就像null.addEventListener.


推荐阅读