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

来源：互联网发布：杭州淘宝培训学校编辑：程序博客网时间：2024/05/29 12:32
<!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.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) event.stopPropagation();              });           })       </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>
0 0