运用jquery产生上中下对话框

网页动态窗口弹出效果

最新推荐文章于 2025-08-12 15:41:31 发布

原创最新推荐文章于 2025-08-12 15:41:31 发布 · 956 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #class #div #stylesheet #button

本文介绍了一种基于HTML和JavaScript实现的网页动态窗口弹出效果，包括窗口位置的自动定位，以及窗口关闭机制。

//html 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>MyHtml.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet"type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css">



   <script src="window.js" type="text/javascript"></script>
    
<style>
.window{
  width:250px;
  background-color:#d0def0;
  padding: 2px;
  margin: 5px;
  position:absolute;
  display: none;

}
.title{
  font-size:15px;
  padding: 3px;


}
.title img{
  float: right;
  cursor:pointer;
}
.content{
  font-size:15px;
  height: 150px;
  background-color: #fff;

  padding: 2px;
}

</style>
<script type="text/javascript">
//按钮的单击事件
  $(document).ready(function(){
   $("#btm2").click(function(){


    $(window).scroll(function(){

    popCenterWindow();

    });

   });




   $("#btm1").click(function(){

    $(window).scroll(function(){

    popLeftWindow();

    });

   });

   $("#btm3").click(function(){
    $(window).scroll(function(){
     popRightWindow();

    });

   });

});
</script>

</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><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><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><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>

    <input type="button" value="弹出左" id="btm1"/>
    <input type="button" value="弹出中" id="btm2"/>
    <input type="button" value="弹出右" id="btm3"/>

    <div id="center" class="window">
    <div class="title">居中csdn欢迎你<img src="images/close.gif"/>    </div>
    <div class="content">csdn呵呵真好<br></div>
</div>
    <div id="left" class="window">
    <div class="title">csdn欢迎你<img src="images/close.gif"/></div>
    <div class="content">csdn呵呵真好</div>
</div>
    <div id="right" class="window">
    <div class="title">csdn欢迎你<img src="images/close.gif"/></div>
    <div class="content">csdn呵呵真好</div>
</div>
</body>
</html>

//窗口的宽度
var windowWidth;
var windowHeight;
var popHeight;
var popWidth;

//获得滚动条的滚动距离
var scollTop;

//忽的滚动条左右滚动的距离
var scrollLeft;

//定义一个掩饰的时间
var timeout;

function init(){
windowWidth=$(window).width();
windowHeight=$(window).height();

popWidth=$(".window").width();
popHeight=$(".window").height();
scrollTop=$(window).scrollTop();
scrollLeft=$(window).scrollLeft();
}

function popCenterWindow(){

clearTimeout(timeout);

timeout=setTimeout(function (){
   //进行参数的初始化
init();

//弹出窗口的x坐标
var popx=(windowWidth-popWidth)/2+scrollLeft;
//弹出窗口的y坐标
var popy=(windowHeight-popHeight)/2+scrollTop;
//让弹窗显示到我们设定的位置
   //让弹窗显示到我们设定的位置
   $("#center").animate({left:popx,top:popy},100).show("slow");
closeWindow();

},300);