在iframe中滾動時無法保持div固定

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當它正常工作 時當我滾動模式時也會向下滾動

當Image2無法正常工作時， 當我使用iframe對其進行集成時，模態不會向下滾動

Answer 1

我對您的第一個建議是，您能否將它從iframe中移除，然后將模式的標記與其余文檔一起放置？

如果沒有，則可以制作另一個僅具有模式框的iframe，然后固定該iframe的位置。

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

Codepen示例