Question

我使用div来保存iframe以模拟弹出窗口。但是，iframe加载的网页有一个下拉菜单，最终会在div之外。如何使它保持在div内？我认为这可能是一个溢出问题，但我所做的一切似乎都没有改变。图片是我所谈论的截图。 Overflow problem 。下拉列表应该在到达较暗区域时停止。

<head>
<style>
 #box{
        display: none;
        position:fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index:1001; 
        -moz-opacity: 0.4;
        opacity:.40;
        filter: alpha(opacity=40);
    }

    #popup{ 
        display: none;
        position: fixed;
        top: 35%;
        left: 40%;
        width: 1000px;
        height: 625px;
        margin: -190px 0 0 -281px;
        z-index:1002;
        overflow: auto;
        background-color: white;
    }
    #popupIframe{
        display: block;
        position: fixed;
        top: inherit;
        left: inherit;
        width: inherit;
        height: inherit;
        margin: -190px 0 0 -281px;
        z-index:1000;
        overflow:auto;
        background-color: white;

        }
    #over{
    position: absolute;
    top: 0px;
    right: 3px;
    background-image: url(images/Button-Close-icon.png); 
    background-repeat:no-repeat;
    height: 32px;
    width:32px;
    z-index:1003;
}

</style>

</head>

<body>
<div id = "popup">
   <iframe id = "popupIframe"  src = "
http://quote.test.usli.com/instantquote/quote/promotion
" ></iframe> 
    <div id="over" onClick="closePopup();" > </div>
</div>
</body>

Answer 1

尝试给予

overflow:none #popup div

#popup{ 
    display: none;
    position: fixed;
    top: 35%;
    left: 40%;
    width: 1000px;
    height: 625px;
    margin: -190px 0 0 -281px;
    z-index:1002;
    overflow: none;
    background-color: white;
}

iframe溢出了div

1 个答案: