使用jquery实现点击按钮弹出层和点击空白处隐藏层
16lz
2021-01-22
01.<!DOCTYPEhtmlPUBLIC
"
-//W3C//DTDXHTML1.0Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
02.
03.<htmlxmlns= " http://www.w3.org/1999/xhtml ">
04.<head>
05.<title>使用jquery弹出层和点击空白处隐藏层</title>
06.<scripttype= " text/javascript "src= " jquery-1.6.2.min.js "></script>
07.<scripttype= " text/javascript ">
08.$(function(){
09.$( ' #btnShow ').click(function( event){
10. // 取消事件冒泡
11. event.stopPropagation();
12. // 设置弹出层的位置
13. varoffset=$( 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.<inputtype= " button "id= " btnShow "value= " 显示提示内容 "/>
28.</div>
29.<divid= " divTop "
30.style= " background-color:#99CCFF;border:solid2px#ff0000;position:absolute;display:none;width:400px;height:200px; ">
31.<divstyle= " text-align:center; ">点击本区域或空白隐藏弹出层</div>
32.</div>
33.</body>
34.</html>
02.
03.<htmlxmlns= " http://www.w3.org/1999/xhtml ">
04.<head>
05.<title>使用jquery弹出层和点击空白处隐藏层</title>
06.<scripttype= " text/javascript "src= " jquery-1.6.2.min.js "></script>
07.<scripttype= " text/javascript ">
08.$(function(){
09.$( ' #btnShow ').click(function( event){
10. // 取消事件冒泡
11. event.stopPropagation();
12. // 设置弹出层的位置
13. varoffset=$( 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.<inputtype= " button "id= " btnShow "value= " 显示提示内容 "/>
28.</div>
29.<divid= " divTop "
30.style= " background-color:#99CCFF;border:solid2px#ff0000;position:absolute;display:none;width:400px;height:200px; ">
31.<divstyle= " text-align:center; ">点击本区域或空白隐藏弹出层</div>
32.</div>
33.</body>
34.</html>
更多相关文章
- jquerymobile phonegap back按钮获取先前状态
- 9.1.4 前端 - HTML body标签 - 标题,段落,分割线,换行，特殊符号，列
- Jquery中的事件处理(自动触发事件,禁用按钮,悬停，失焦，滑动效果)
- 你能告诉为什么javascript函数没有在profile.php的提交按钮中执
- html5中点击按钮，改变按钮状态效果样式
- 组合两个下拉菜单以确定提交按钮链接
- 设计不是使用跨度和按钮
- 使用下一个div中的文本设置“下一个”按钮的文本
- 更改在表Django中选择了其中一个按钮时显示的状态