我是一个编程的入门者。我一直在寻找答案,但没有一个能解决我的问题。我使用了该问题中解释的如何居中javascript css弹出式div,无论屏幕分辨率是什么?的弹出式div方法。
通过对以下代码进行小改动,是否有可能通过单击其外部区域来关闭一个div?
通过对以下代码进行小改动,是否有可能通过单击其外部区域来关闭一个div?
<script type="text/javascript">
function showPopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "block"
dlg.style.display = "block"
if (document.body.style.overflow = "scroll") {
cvr.style.width = "1024"
cvr.style.height = "100%"
}
}
function closePopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "none"
dlg.style.display = "none"
document.body.style.overflowY = "scroll"
}
</script>
<style type="text/css">
#cover {
display: none;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: gray;
filter: alpha(Opacity = 50);
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5
}
</style>
在HTML中,我隐藏了具有ID dialog1
、dialog2
等的多个
元素。当用户点击链接时,这些元素会显示出来,为了关闭它们,我使用了一个链接:
< a class="close" href="#2" onclick="closePopUp('dialog2');">< img src="/img/close.png" height="30px"></a >