javascript - 使用样式控制弹出窗口

Question

我正在尝试加载我网站中的其他域页面。它工作正常。单击 iframe 中打开的网页时，会出现警报。但这一切的发生都是因为

overlay{top:0;left:0;width:100%;height:100%;position:absolute; }   

但问题是如果我使用上面的CSS，网页就会卡住，它不会滚动如果我改变position:relative警报不会打开

<div class="container" style='position:fixed; left: 0; right: 0; bottom: 0; top: 0px; height: 100%;z-index: 1111111;'>
<iframe class='theiframe' width='100%' height='100%' src='http://www.cnbc.com/world/?region=world/'></iframe>
<div class="overlay"></div>
</div>

<script>
$(document).ready(function () {
   $('.container').bind('click', function(event) { alert('test'); });
});// main function
</script>

<style>
.container{position:relative;float:left;}
.overlay{top:0;left:0;width:100%;height:100%;position:absolute; }
/*background-color: rgba(193, 179, 179, 0.52);margin-top: 5%;margin-left: 3%;*/
</style>

Answer 1

将 overflow: auto; 添加到它将滚动的容器类

.container{position:relative;float:left; overflow: auto;}

<强> Demo Here