Question

我有一个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正常工作 When I scroll the modal also scrolls down

Image2无法正常工作 When I integrate it using iframe the modal doesnot scroll down

Answer 1

我给你的第一个建议是，你能不能将它从iframe中删除，并将模态的标记与文档的其余部分一起放置？

如果没有，那么你可以制作另一个iframe，它只有模态框，然后定位固定为iframe。

iframe {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 80%;
  height: 70%;
  transform: translate(-50%, -50%);
}

<强> Codepen example

在iframe中滚动时无法保持div固定

1 个答案: