01.<!DOCTYPE html PUBLIC
"
-//W3C//DTD XHTML 1.0 Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
02.
03.<html xmlns= " http://www.w3.org/1999/xhtml ">
04.<head>
05. <title>使用jquery弹出层和点击空白处隐藏层</title>
06. <script type= " text/javascript " src= " jquery-1.6.2.min.js "></script>
07. <script type= " text/javascript ">
08. $(function () {
09. $( ' #btnShow ').click(function ( event) {
10. // 取消事件冒泡
11. event.stopPropagation();
12. // 设置弹出层的位置
13. var offset = $( event.target).offset();
14. $( ' #divTop ').css({ top: offset.top + $( event.target).height() + " px ", left: offset.left });
15. // 按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。
16. $( ' #divTop ').toggle( ' slow ');
17. });
18. // 点击空白处或者自身隐藏弹出层，下面分别为滑动和淡出效果。
19. $(document).click(function ( event) { $( ' #divTop ').slideUp( ' slow ') });
20. $( ' #divTop ').click(function ( event) { $( this).fadeOut( 1000) });
21. })
22. </script>
23.</head>
24.<body>
25.<div>
26.<br />
27.<input type= " button " id= " btnShow " value= " 显示提示内容 " />
28.</div>
29.<div id= " divTop "
30. style= " background-color:#99CCFF; border: solid 2px #ff0000; position:absolute; display:none; width:400px; height:200px; ">
31.<div style= " text-align:center; ">点击本区域或空白隐藏弹出层</div>
32.</div>
33.</body>
34.</html>
02.
03.<html xmlns= " http://www.w3.org/1999/xhtml ">
04.<head>
05. <title>使用jquery弹出层和点击空白处隐藏层</title>
06. <script type= " text/javascript " src= " jquery-1.6.2.min.js "></script>
07. <script type= " text/javascript ">
08. $(function () {
09. $( ' #btnShow ').click(function ( event) {
10. // 取消事件冒泡
11. event.stopPropagation();
12. // 设置弹出层的位置
13. var offset = $( event.target).offset();
14. $( ' #divTop ').css({ top: offset.top + $( event.target).height() + " px ", left: offset.left });
15. // 按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。
16. $( ' #divTop ').toggle( ' slow ');
17. });
18. // 点击空白处或者自身隐藏弹出层，下面分别为滑动和淡出效果。
19. $(document).click(function ( event) { $( ' #divTop ').slideUp( ' slow ') });
20. $( ' #divTop ').click(function ( event) { $( this).fadeOut( 1000) });
21. })
22. </script>
23.</head>
24.<body>
25.<div>
26.<br />
27.<input type= " button " id= " btnShow " value= " 显示提示内容 " />
28.</div>
29.<div id= " divTop "
30. style= " background-color:#99CCFF; border: solid 2px #ff0000; position:absolute; display:none; width:400px; height:200px; ">
31.<div style= " text-align:center; ">点击本区域或空白隐藏弹出层</div>
32.</div>
33.</body>
34.</html>