欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery之弹出层(用于提示)

程序员文章站 2022-06-10 09:35:00
...
参考了权威指南的部分代码jQuery之弹出层(用于提示)
            
    
    博客分类: Jquery jqueryopendiv 
实现效果:单击按钮显示层,在单击就隐藏层,层上点击后隐藏层,页面单击后隐藏层,用于常见的提示
使用版本: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>        

相关标签: jquery opendiv