jQuery之弹出层(用于提示)
参考了权威指南的部分代码
实现效果:单击按钮显示层,在单击就隐藏层,层上点击后隐藏层,页面单击后隐藏层,用于常见的提示
使用版本:jQuery 1.6.2
jQuery代码如下:
<script type="text/javascript" > $(function() { //动画速度 var speed = 500; //是否显示或者隐藏层的标记 var tag = 0; $("#btnShow").click(function(event){ //取消事件冒泡 event.stopPropagation(); if(tag == 1){ tag = 0; $("#divPop").hide(speed); }else{ tag = 1; //设置弹出层位置 var offset = $(event.target).offset(); $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });//动画显示 $("#divPop").show(speed); }}); //单击空白区域隐藏弹出层 $(document).click(function(event) { $("#divPop").hide(speed); tag = 0; }); //单击弹出层则自身隐藏 $("#divPop").click(function(event) { $("#divPop").hide(speed); tag = 0; }); })</script>
<div> <button id="btnShow" style="margin-top: 200px;margin-left: 300px">显示提示文字</button> </div> <!-- 弹出层 --> <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none;width: 300px; height: 100px;"> <div style="text-align: center;">弹出层</div> </div>