困扰很久的弹出框位置统制
困扰很久的弹出框位置控制
效果图：
很久以前为了弹出一个信息框，需要通过很多算法算出信息框的绝对位置，位置获取是很麻烦的。可能是根据当前鼠标位置也可能是当前元素位置，还需要考虑浏览器的兼容性问题。偶然一次机会做弹出框效果，美工教给了我一个简单的处理，无须再复杂的计算弹出框位置，这样每次只要控制div的显示或者隐藏。
具体代码如下：
<html>
<head>
<script type="text/javascript">
function showDiv () {
document.getElementById("divShow").style.display = "block";
}
</script>
</head>
<body>
<span style="position: relative;" ><!-- 包含容器相对定位 -->
<a href="javascript:showDiv()">弹出框</a>
<!-- 弹出框div绝对定位 -->
<div id="divShow" style="position: absolute;display:none;width: 300px;height: 400px;background: blue;">
弹出框信息
</div>
</span>
</body>
</html>
效果图：