<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery Animation - Toggle </title> <mce:script type="text/javascript" src="../scripts/jquery-1.3.2-vsdoc2.js" mce_src="scripts/jquery-1.3.2-vsdoc2.js"></mce:script> <mce:script type="text/javascript"><!-- $(document).ready(function() { //动画速度 var speed = 500; //绑定事件处理 $("#btnShow").click(function(event) { //取消事件冒泡 event.stopPropagation(); //设置弹出层位置 var offset = $(event.target).offset(); $("#divPop").css({ top: offset.top + $(event.target).height() + "px", right:$(window).width()- offset.left }); //切换弹出层的显示状态 $("#divPop").toggle(speed); $(document).click(function(event){$("#divPop").hide(speed );}); }); }); // --></mce:script> </head> <body> <div style ="left :200px"> <br /><br /><br /> <label id ="btnShow" style ="color :Blue ">显示</label> <!-- <button id="btnShow" >提示文字</button>--> </div> <!-- 弹出层 --> <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none; width: 80px; height: 100px;"> <div style="text-align: center;" mce_style="text-align: center;">内容</div> </div> </body> </html>