![](/img/trans.png)
[英]Keep fixed the div only while scrolling and depends on the parent div height
[英]Not able to keep the div fixed while scrolling in an iframe
我有一个Web应用程序,单击该应用程序后会以模式显示产品及其信息。 现在,当我在本地主机上运行此Web应用程序时,将出现模式,并且在我滚动时,它会根据需要保持固定在屏幕中央。 该Web应用程序是更大的Web应用程序的一部分。 我使用iframe将这个Web应用程序集成到更大的Web应用程序中。 现在,在这种情况下,当我单击一个产品时,我得到了模态,但是当我向下滚动时,模态仍在顶部,当我像以前一样滚动时,模态不会下降。 如何解决这个问题?
我附上代码和一些图片供您参考。
模态的HTML代码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="popup-wrapper product-detail ibox-content wrapper
wrapper-content animated fadeInRight" data-spy="affix" data-offset-
top="400" ng-show="show" ng-click="closeModalOnOutside($event)">
<div class="popup row ibox-content modal-dialog" >
<button type="button" class="close" ng-click="closeModal()">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<div class="images col-md-5 col-xs-12" >
<div class="slick-slide slick-current slick-active" >
<div class="text-center">
<img ng-src={{item.Results.Results[0].image}}
alt="">
</div>
</div>
</div>
<div class="col-md-7 col-xs-12" >
<div class="top-wrapper">
<div class="name-wrapper">
<h2 class="font-bold m-b-xs">
{{item.Results.Results[0].name}}
</h2>
</div>
<div class="m-t-md">
<h2 class="product-main-price">{{'$
'+item.Results.Results[0].price}} </h2>
</div>
<hr>
<h4>Details:</h4>
<div class="small text-muted">
{{item.Results.Results[0] | tag }}
</div>
<hr>
<div>
<div class="btn-group">
<button class="btn btn-primary btn-sm" ng-
click="goToItem( item.Results.Results[0].product_url)">
<i class="fa fa-cart-plus"></i> Purchase Item</button>
</div>
</div>
</div>
</div>
<div class="loader-wrapper" ng-hide="!isLoading">
<div class="loader-inner">
<div class="loader">
<div class="sk-spinner sk-spinner-wave">
<div class="sk-rect1"></div>
<div class="sk-rect2"></div>
<div class="sk-rect3"></div>
<div class="sk-rect4"></div>
<div class="sk-rect5"></div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS代码
.popup-wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(47, 64, 80, 0.3);
justify-content: center;
align-items: center;
z-index: 50;
padding: 30px;
overflow: auto;
}
.popup-wrapper .popup {
position: relative;
min-height: 200px;
background-color: #fff;
box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.4);
}
.popup-wrapper .popup {
width: 700px;
display: flex;
margin: auto;
}
.product-detail .ibox-content {
padding: 30px 30px 50px 30px;
}
.ibox-content {
clear: both;
}
.ibox-content {
background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0;
}
.modal-dialog {
z-index: 2200;
}
图片1当它正常工作 时当我滚动模式时也会向下滚动
当Image2无法正常工作时, 当我使用iframe对其进行集成时,模态不会向下滚动
我对您的第一个建议是,您能否将它从iframe中移除,然后将模式的标记与其余文档一起放置?
如果没有,则可以制作另一个仅具有模式框的iframe,然后固定该iframe的位置。
iframe {
position: fixed;
left: 50%;
top: 50%;
width: 80%;
height: 70%;
transform: translate(-50%, -50%);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.