灯箱不会 move/scroll WITH 页面

Question

这是我的测试页 - http://mymsaa.org/lightbox_test/2.php

我可以在灯箱弹出时使用我的滚动条，但如果有意义的话，我需要灯箱随滚动条一起移动。

在移动设备上无法正常工作，因为我无法上下滚动灯箱并查看所有内容。

我知道我的 CSS 中有 "position: fixed;"...

.ezmodal-container {
background: #fff;
padding: 0;
font-size: 14px;
position: fixed;
top: 50%;
left: 50%;
z-index: 90001;
border: 2px solid #b01b11;
-webkit-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.8);
   -moz-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.8);
        box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.8);
-webkit-transform: translateY(-50%) translateX(-50%); 
    -ms-transform: translateY(-50%) translateX(-50%);
        transform: translateY(-50%) translateX(-50%);
}

...但如果我删除它，那么整个事情就会不对齐。

这是我的 HTML 代码。

<script type="text/javascript" src="http://mymsaa.org/wp-content/themes/dw-focus/assets/js/jquery-1.12.0.min.js"></script>
<noscript>Your browser does not support JavaScript</noscript>   
<script src="http://mymsaa.org/lightbox_test/src/ezmodal.js"></script>
<noscript>Your browser does not support JavaScript</noscript>          
<link rel="stylesheet" href="http://mymsaa.org/lightbox_test/src/ezmodal.css">

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--LIGHTBOX-->      

<div class="ezmodal" ezmodal-autoopen="true">
<div class="ezmodal-container">

<!--IFRAME FORM-->                                            
<div id='subscribe_popup' style='overflow: hidden; overflow-y:hidden;'>
<div style="padding: 10px;">
<iframe src="http://mymsaa.org/wp-content/themes/dw-focus/video_register/iframe/iframe.php" border="0" frameborder="0" scrolling="no" name="pop"></iframe>
</div>
</div>
<!--IFRAME FORM--> 

<div class="ezmodal-footer">
<button type="button" class="btn1" data-dismiss="ezmodal">Skip Registration</button>
</div>

</div>
</div>

<!--IFRAME CSS-->
<style type="text/css">

#subscribe_popup { width: 470px; height: 380px; overflow: hidden; overflow-y:hidden; }

#subscribe_popup iframe { width: 446px; height: 380px; }

/*992px*/
@media only screen and (min-width: 992px) and (max-width: 1200px) {

#subscribe_popup { width: 470px;}
}

/*768px*/
@media only screen and (min-width: 768px) and (max-width: 992px) {

#subscribe_popup { width: 470px;}

}

/*480px*/
@media only screen and (min-width: 480px) and (max-width: 768px) {

#subscribe_popup { width: 280px; height: 420px; margin-left: auto;
margin-right: auto;}

#subscribe_popup iframe { width: 250px; height: 400px; }

}

/*320px*/
@media only screen and (min-width: 320px) and (max-width: 480px) {

#subscribe_popup { width: 280px; height: 420px; margin-left: auto;
margin-right: auto;}

#subscribe_popup iframe { width: 250px; height: 400px; }

}

</style>
<!--IFRAME CSS-->

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque malesuada ligula, id cursus diam facilisis ac. Sed id pulvinar mauris. Phasellus ac arcu velit. Cras tempor vestibulum volutpat. Proin consectetur lectus elementum imperdiet congue. Quisque quis nunc libero. Praesent gravida urna metus, ut elementum arcu posuere quis. Suspendisse mattis, enim vitae semper porta, metus mauris dignissim lorem, non eleifend risus mauris non diam. Ut in ullamcorper tortor, eu lobortis nibh.    <p>

<p>Ut quis lectus sit amet tortor tempus imperdiet. Maecenas enim lacus, hendrerit ac volutpat quis, ornare eu diam. Maecenas nec odio odio. Aenean eu lectus lacinia, luctus mi non, placerat metus. Proin id tortor nec est suscipit ullamcorper sed eu metus. Donec efficitur, massa eu sagittis vehicula, magna erat gravida elit, dapibus vehicula tellus dolor sed purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris auctor vel tellus vitae congue. Proin tincidunt quam velit, at posuere odio lobortis sit amet. Etiam posuere condimentum leo, a auctor elit sollicitudin nec. Vivamus faucibus tortor rhoncus orci fermentum, vitae efficitur orci mattis. Nunc est nunc, euismod vel magna vitae, fermentum dapibus libero. Maecenas quis erat aliquam enim scelerisque scelerisque sed vel metus. Sed eget finibus justo, consequat ornare sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>     

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque malesuada ligula, id cursus diam facilisis ac. Sed id pulvinar mauris. Phasellus ac arcu velit. Cras tempor vestibulum volutpat. Proin consectetur lectus elementum imperdiet congue. Quisque quis nunc libero. Praesent gravida urna metus, ut elementum arcu posuere quis. Suspendisse mattis, enim vitae semper porta, metus mauris dignissim lorem, non eleifend risus mauris non diam. Ut in ullamcorper tortor, eu lobortis nibh.    <p>

<p>Ut quis lectus sit amet tortor tempus imperdiet. Maecenas enim lacus, hendrerit ac volutpat quis, ornare eu diam. Maecenas nec odio odio. Aenean eu lectus lacinia, luctus mi non, placerat metus. Proin id tortor nec est suscipit ullamcorper sed eu metus. Donec efficitur, massa eu sagittis vehicula, magna erat gravida elit, dapibus vehicula tellus dolor sed purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris auctor vel tellus vitae congue. Proin tincidunt quam velit, at posuere odio lobortis sit amet. Etiam posuere condimentum leo, a auctor elit sollicitudin nec. Vivamus faucibus tortor rhoncus orci fermentum, vitae efficitur orci mattis. Nunc est nunc, euismod vel magna vitae, fermentum dapibus libero. Maecenas quis erat aliquam enim scelerisque scelerisque sed vel metus. Sed eget finibus justo, consequat ornare sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>  


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque malesuada ligula, id cursus diam facilisis ac. Sed id pulvinar mauris. Phasellus ac arcu velit. Cras tempor vestibulum volutpat. Proin consectetur lectus elementum imperdiet congue. Quisque quis nunc libero. Praesent gravida urna metus, ut elementum arcu posuere quis. Suspendisse mattis, enim vitae semper porta, metus mauris dignissim lorem, non eleifend risus mauris non diam. Ut in ullamcorper tortor, eu lobortis nibh.    <p>

<p>Ut quis lectus sit amet tortor tempus imperdiet. Maecenas enim lacus, hendrerit ac volutpat quis, ornare eu diam. Maecenas nec odio odio. Aenean eu lectus lacinia, luctus mi non, placerat metus. Proin id tortor nec est suscipit ullamcorper sed eu metus. Donec efficitur, massa eu sagittis vehicula, magna erat gravida elit, dapibus vehicula tellus dolor sed purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris auctor vel tellus vitae congue. Proin tincidunt quam velit, at posuere odio lobortis sit amet. Etiam posuere condimentum leo, a auctor elit sollicitudin nec. Vivamus faucibus tortor rhoncus orci fermentum, vitae efficitur orci mattis. Nunc est nunc, euismod vel magna vitae, fermentum dapibus libero. Maecenas quis erat aliquam enim scelerisque scelerisque sed vel metus. Sed eget finibus justo, consequat ornare sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>  

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque malesuada ligula, id cursus diam facilisis ac. Sed id pulvinar mauris. Phasellus ac arcu velit. Cras tempor vestibulum volutpat. Proin consectetur lectus elementum imperdiet congue. Quisque quis nunc libero. Praesent gravida urna metus, ut elementum arcu posuere quis. Suspendisse mattis, enim vitae semper porta, metus mauris dignissim lorem, non eleifend risus mauris non diam. Ut in ullamcorper tortor, eu lobortis nibh.    <p>

<p>Ut quis lectus sit amet tortor tempus imperdiet. Maecenas enim lacus, hendrerit ac volutpat quis, ornare eu diam. Maecenas nec odio odio. Aenean eu lectus lacinia, luctus mi non, placerat metus. Proin id tortor nec est suscipit ullamcorper sed eu metus. Donec efficitur, massa eu sagittis vehicula, magna erat gravida elit, dapibus vehicula tellus dolor sed purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris auctor vel tellus vitae congue. Proin tincidunt quam velit, at posuere odio lobortis sit amet. Etiam posuere condimentum leo, a auctor elit sollicitudin nec. Vivamus faucibus tortor rhoncus orci fermentum, vitae efficitur orci mattis. Nunc est nunc, euismod vel magna vitae, fermentum dapibus libero. Maecenas quis erat aliquam enim scelerisque scelerisque sed vel metus. Sed eget finibus justo, consequat ornare sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>  
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque malesuada ligula, id cursus diam facilisis ac. Sed id pulvinar mauris. Phasellus ac arcu velit. Cras tempor vestibulum volutpat. Proin consectetur lectus elementum imperdiet congue. Quisque quis nunc libero. Praesent gravida urna metus, ut elementum arcu posuere quis. Suspendisse mattis, enim vitae semper porta, metus mauris dignissim lorem, non eleifend risus mauris non diam. Ut in ullamcorper tortor, eu lobortis nibh.    <p>

<p>Ut quis lectus sit amet tortor tempus imperdiet. Maecenas enim lacus, hendrerit ac volutpat quis, ornare eu diam. Maecenas nec odio odio. Aenean eu lectus lacinia, luctus mi non, placerat metus. Proin id tortor nec est suscipit ullamcorper sed eu metus. Donec efficitur, massa eu sagittis vehicula, magna erat gravida elit, dapibus vehicula tellus dolor sed purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris auctor vel tellus vitae congue. Proin tincidunt quam velit, at posuere odio lobortis sit amet. Etiam posuere condimentum leo, a auctor elit sollicitudin nec. Vivamus faucibus tortor rhoncus orci fermentum, vitae efficitur orci mattis. Nunc est nunc, euismod vel magna vitae, fermentum dapibus libero. Maecenas quis erat aliquam enim scelerisque scelerisque sed vel metus. Sed eget finibus justo, consequat ornare sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>  
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque malesuada ligula, id cursus diam facilisis ac. Sed id pulvinar mauris. Phasellus ac arcu velit. Cras tempor vestibulum volutpat. Proin consectetur lectus elementum imperdiet congue. Quisque quis nunc libero. Praesent gravida urna metus, ut elementum arcu posuere quis. Suspendisse mattis, enim vitae semper porta, metus mauris dignissim lorem, non eleifend risus mauris non diam. Ut in ullamcorper tortor, eu lobortis nibh.    <p>

<p>Ut quis lectus sit amet tortor tempus imperdiet. Maecenas enim lacus, hendrerit ac volutpat quis, ornare eu diam. Maecenas nec odio odio. Aenean eu lectus lacinia, luctus mi non, placerat metus. Proin id tortor nec est suscipit ullamcorper sed eu metus. Donec efficitur, massa eu sagittis vehicula, magna erat gravida elit, dapibus vehicula tellus dolor sed purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris auctor vel tellus vitae congue. Proin tincidunt quam velit, at posuere odio lobortis sit amet. Etiam posuere condimentum leo, a auctor elit sollicitudin nec. Vivamus faucibus tortor rhoncus orci fermentum, vitae efficitur orci mattis. Nunc est nunc, euismod vel magna vitae, fermentum dapibus libero. Maecenas quis erat aliquam enim scelerisque scelerisque sed vel metus. Sed eget finibus justo, consequat ornare sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>  
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque malesuada ligula, id cursus diam facilisis ac. Sed id pulvinar mauris. Phasellus ac arcu velit. Cras tempor vestibulum volutpat. Proin consectetur lectus elementum imperdiet congue. Quisque quis nunc libero. Praesent gravida urna metus, ut elementum arcu posuere quis. Suspendisse mattis, enim vitae semper porta, metus mauris dignissim lorem, non eleifend risus mauris non diam. Ut in ullamcorper tortor, eu lobortis nibh.    <p>

<p>Ut quis lectus sit amet tortor tempus imperdiet. Maecenas enim lacus, hendrerit ac volutpat quis, ornare eu diam. Maecenas nec odio odio. Aenean eu lectus lacinia, luctus mi non, placerat metus. Proin id tortor nec est suscipit ullamcorper sed eu metus. Donec efficitur, massa eu sagittis vehicula, magna erat gravida elit, dapibus vehicula tellus dolor sed purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris auctor vel tellus vitae congue. Proin tincidunt quam velit, at posuere odio lobortis sit amet. Etiam posuere condimentum leo, a auctor elit sollicitudin nec. Vivamus faucibus tortor rhoncus orci fermentum, vitae efficitur orci mattis. Nunc est nunc, euismod vel magna vitae, fermentum dapibus libero. Maecenas quis erat aliquam enim scelerisque scelerisque sed vel metus. Sed eget finibus justo, consequat ornare sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>  
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque malesuada ligula, id cursus diam facilisis ac. Sed id pulvinar mauris. Phasellus ac arcu velit. Cras tempor vestibulum volutpat. Proin consectetur lectus elementum imperdiet congue. Quisque quis nunc libero. Praesent gravida urna metus, ut elementum arcu posuere quis. Suspendisse mattis, enim vitae semper porta, metus mauris dignissim lorem, non eleifend risus mauris non diam. Ut in ullamcorper tortor, eu lobortis nibh.    <p>

这是我的CSS。

/*
* eZmodal
* doc: http://markusslima    .github    .io/ezmodal/
* github: https://github    .com/markusslima/ezmodal
*
* Copyright (c) 2015 Markus Vinicius da Silva Lima
* Version 0    .1    .2
* Licensed under the MIT license    .
*/
.ezmodal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 90000;
background: rgba(0,0,0,    .6);
overflow-x: visible;
overflow-y: visible;
display: none;
}

.ezmodal-container {

background: #fff;
padding: 0;
font-size: 14px;
position: fixed;
top: 50%;
left: 50%;
z-index: 90001;
border: 2px solid #b01b11;
-webkit-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0    .8);
   -moz-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0    .8);
        box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0    .8);
-webkit-transform: translateY(-50%) translateX(-50%); 
    -ms-transform: translateY(-50%) translateX(-50%);
        transform: translateY(-50%) translateX(-50%);
}



.ezmodal     .ezmodal-close:hover {
color: #535353;
}

.ezmodal     .ezmodal-header {

}

.ezmodal     .ezmodal-content {

}

.ezmodal     .ezmodal-footer {
padding: 10px 20px;
border-top: 1px solid #e3e3e3;
text-align: center;

}

Answer 1

您可以在位置absolute设置.ezmodal。

并使用此脚本像文档一样设置 div 高度：

<script>
jQuery(document).ready(function(){

 function docuHeight() {
 var wH = $(window).height();
 var bH = window.innerHeight;

jQuery('.ezmodal').css({
  height: wH
});
jQuery('.ezmodal-container').css({
  top: bH/2
});
 }
 docuHeight(); 
  $( window ).resize(function() {
docuHeight();  
 });


});
</script>

灯箱不会 move/scroll WITH 页面

Lightbox won't move/scroll WITH page

jquery

css

scroll

css-position

lightbox