使用jquery实现点击按钮弹出层和点击空白处隐藏层

来源：互联网发布：电信光猫iptv端口连接编辑：程序博客网时间：2024/05/25 21:35

使用jquery实现点击按钮弹出层和点击空白处隐藏层

<!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弹出层和点击空白处隐藏层</title>     <script type="text/javascript" src="jquery-1.6.2.min.js"></script>     <script type="text/javascript">         $(function () {             $('#btnShow').click(function (event) {                 //取消事件冒泡                 event.stopPropagation();                 //设置弹出层的位置                 var offset = $(event.target).offset();                 $('#divTop').css({ top: offset.top + $(event.target).height() + "px", left: offset.left });                 //按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。                   $('#divTop').toggle('slow');             });             //点击空白处或者自身隐藏弹出层，下面分别为滑动和淡出效果。             $(document).click(function (event) { $('#divTop').slideUp('slow') });             $('#divTop').click(function (event) { $(this).fadeOut(1000) });         })     </script></head><body><div><br /><input type="button" id="btnShow" value="显示提示内容" /></div><div id="divTop"         style=" background-color:#99CCFF; border: solid 2px #ff0000; position:absolute; display:none; width:400px; height:200px;"><div style="text-align:center;">点击本区域或空白隐藏弹出层</div></div></body></html>