基于jQuery实现点击弹出层实例代码

时间：2021-05-25

jquery实现点击链接弹出层效果：本例实现的主要原理：jquery操作DOM元素。对层样式的设置。将display:设置为none;让层隐藏；

代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="https://" /><title>子选择器</title><style type="text/css">#choice_list_district{height:50px;}#tab td{cursor:pointer;}#divobj{position:absolute; width:200px; height:200px; background:blue; border:1px solid block; display:none; z-index:9999;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function (){ $("#choice_list_district a").click(function(e){ if($("#divobj").css("display")=="none"){ e.stopPropagation(); var offset=$(e.target).offset(); $("#divobj").css({top:offset.top+$(e.target).height()+"px",left:offset.left}); $("#divobj").show(); } else{ $("#divobj").hide(); } }); $(document).click(function(event){ $("#divobj").hide(); }); }); </script></head><body><form id="form1" runat="server"><div><div id="choice_list_district"> <a href="#">出来层</a> </div><div id="divobj"></div></div></form></body></html>

以上代码中，点击链接可以弹出隐藏的层，再点击任何地方就可以隐藏此层。

本段代码简单易懂，写的不好还请各位大侠见谅，希望本文分享能够给大家带来帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章