Question

在this page右下角，有一个YouTube播放按钮，点击后会打开一个模态窗口，但模式窗口会出现在浏览器窗口的顶部，因此用户必须向上滚动。 / p>

<img src="http://gm.insightcomdes.com.au/wp-content/themes/wtc%2029.3.18/images/icons/video-play.png" width="" height="" alt="play video" class="aligncenter" id="toggle">

jQuery(document).ready(function() {
    jQuery('#toggle').click(function(){
        jQuery('#video').appendTo('body');
        jQuery('#video').addClass('active');
        jQuery(window).scrollTo(jQuery('#top').scrollTo());
    });
    jQuery('#close').click(function(){
        jQuery('#video').removeClass('active');
    });              
});

<div class="mfp-container active" id="video">
    <div class="mfp-content">
         <p align="right"><img src="http://gm.insightcomdes.com.au/wp-content/themes/wtc%2029.3.18/images/icons/close.png" alt="close video" width="20" height="20" id="close"></p>
         <iframe width="560" height="315" src="https://www.youtube.com/embed/ut6UYwbt6Xk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>            
     </div>
</div>

<style>
.mfp-container {
    text-align: center;
    vertical-align: middle;
    position: absolute;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    padding: 0 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.5);
    display: none;
    z-index: 999999999;
}
.mfp-container.active {
    display: flex;
    align-items: center;
}
</style>

显然.mfp-container CSS规则设置了0的顶部和左侧。

如何将.mfp-container设置为在页面中当前用户的位置显示而不使用硬编码值，因为此视频窗口小部件可能位于页面的任何位置？

Answer 1

您可能希望使用CSS position: fixed;而不是position: absolute;。这将始终将模态保持在屏幕上的固定位置，而不是相对于其他元素的绝对位置。

如何在用户的当前滚动位置加载模态窗口

1 个答案: