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>