当前位置:Gxlcms > JavaScript > 基于jQuery实现点击弹出层实例代码

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

时间:2021-07-01 10:21:17 帮助过:21人阅读

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

代码实例如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=" utf-8">
  5. <meta name="author" content="//www.gxlcms.com" />
  6. <title>子选择器</title>
  7. <style type="text/css">
  8. #choice_list_district{
  9. height:50px;
  10. }
  11. #tab td{
  12. cursor:pointer;
  13. }
  14. #divobj{
  15. position:absolute;
  16. width:200px;
  17. height:200px;
  18. background:blue;
  19. border:1px solid block;
  20. display:none;
  21. z-index:9999;
  22. }
  23. </style>
  24. <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
  25. <script type="text/javascript">
  26. $(function (){
  27. $("#choice_list_district a").click(function(e){
  28. if($("#divobj").css("display")=="none"){
  29. e.stopPropagation();
  30. var offset=$(e.target).offset();
  31. $("#divobj").css({top:offset.top+$(e.target).height()+"px",left:offset.left});
  32. $("#divobj").show();
  33. }
  34. else{
  35. $("#divobj").hide();
  36. }
  37. });
  38. $(document).click(function(event){
  39. $("#divobj").hide();
  40. });
  41. });
  42. </script>
  43. </head>
  44. <body>
  45. <form id="form1" runat="server">
  46. <div>
  47. <div id="choice_list_district"> <a href="#">出来层</a> </div>
  48. <div id="divobj"></div>
  49. </div>
  50. </form>
  51. </body>
  52. </html>

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

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

人气教程排行