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

Question

在此页面的右下角，有一个 YouTube 播放按钮，单击该按钮将打开一个模式窗口，但模式窗口出现在浏览器窗口的顶部，因此用户必须向上滚动。

<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-containerCSS 规则将顶部和左侧设置为 0。

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

Answer 1

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