0621jQuery练习：弹窗

最新推荐文章于 2025-07-11 20:27:23 发布

weixin_34221036

最新推荐文章于 2025-07-11 20:27:23 发布

阅读量63

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhangbaozhong/p/9210724.html

本文介绍了一种利用jQuery库来实现网页上弹窗效果的方法。通过简单的HTML结构结合jQuery的show和hide方法，可以轻松地创建并控制弹窗的显示与隐藏。此外，还考虑了浏览器窗口大小变化及滚动条滚动时对弹窗位置的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>Document</title>
   <script src="../bootstrap/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
   <style type="text/css">
       .tanchuang{
           width: 500px;
           height: 500px;
           background: green;
           display: none;
           position: absolute;
       }
       .close{
           float: right;
           margin-top: 10px;
           margin-right: 10px;
       }
       .close:hover{
           cursor: pointer;
       }
   </style>
</head>
<body>
   <br><br><br><br><br><br><br>
   <br><br><br><br><br><br><br>
   <br><br><br><br><br><br><br>
   <br><br><br><br><br><br><br>
   <br><br><br><br><br><br><br>
   <button>弹窗</button>
   <div class="tanchuang">
       <div class="close">X</div>
   </div>
</body>
</html>
<script type="text/javascript">
   huoqu();
//   show:显示元素
   $("button").click(function(){
       $(".tanchuang").show();
   });
//   hide:隐藏元素
   $(".close").click(function(){
       $(".tanchuang").hide();
   });
//   浏览器窗口的大小发生变化时触发resize事件
   $(window).resize(function(){
       huoqu();
   });
//   滚动条滚动时触发scroll事件
   $(window).scroll(function(){
       huoqu();
   });
   function huoqu(){
//       用$(window).scrollTop()获取滚动条滚动和距离顶部的距离
       var topp = $(window).scrollTop();
//       用$(window).width()获取浏览器窗口的宽度
       var wid = $(window).width();
       var wida = (wid-500)/2;
//       用$(window).height()获取浏览器窗口的高度
       var hei = $(window).height();
       var heia = (hei-500)/2;
       $(".tanchuang").css("left",wida);
       $(".tanchuang").css("top",heia + topp);
   }
</script>