jQuery弹出窗口完整代码

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>jQuery弹出窗口 - 计划-博客园</title>
  6 <meta name="keywords" content="www.cnblogs.com/jihua"/>
  7 <style type="text/css">
  8 .window{
  9     width:250px;
 10     background-color:#d0def0;
 11     position:absolute;
 12     padding:2px;
 13     margin:5px;
 14     display:none;
 15     }
 16 .content{
 17     height:150px;
 18     background-color:#FFF;
 19     font-size:14px;
 20     overflow:auto;
 21     }
 22     .title{
 23         padding:2px;
 24         color:#0CF;
 25         font-size:14px;
 26         }
 27 .title img{
 28         float:right;
 29         }
 30 </style>
 31 <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.7.2.min.js"></script>
 32 <script type="text/javascript" language="javascript">
 33     $(document).ready(function () {
 34         $("#btn_center").click(function () {
 35             popCenterWindow();
 36         });
 37
 38         $("#btn_right").click(function () {
 39             popRightWindow();
 40         });
 41         $("#btn_left").click(function () {
 42             popLeftWindow();
 43         });
 44
 45     });
 46
 47 </script>
 48 </head>
 49 <body>
 50  <div style="width:600px;margin-left:auto;margin-right:auto;margin-top:160px;">
 51 <input type="button" value="居中窗口" id="btn_center" />
 52 <input type="button" value="居左下角" id="btn_left" />
 53 <input type="button" value="居右下角" id="btn_right" />
 54 </div>
 55    <div class="window" id="center">
 56 <div id="title" class="title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />计划 博客园-居中窗口</div>
 57 <div class="content">jihua.cnblogs.com</div>
 58    </div>
 59
 60   <div class="window" id="left">
 61 <div id="title2" class="title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />计划 博客园-居左窗口</div>
 62 <div class="content">jihua.cnblogs.com</div>
 63   </div>
 64   <div class="window" id="right">
 65 <div id="title3" class="title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />计划 博客园-居右窗口</div>
 66 <div class="content">jihua.cnblogs.com</div>
 67   </div>
 68   <script type="text/javascript">
 69   //获取窗口的高度
 70 var windowHeight;
 71 //获取窗口的宽度
 72 var windowWidth;
 73 //获取弹窗的宽度
 74 var popWidth;
 75 //获取弹窗高度
 76 var popHeight;
 77 function init(){
 78    windowHeight=$(window).height();
 79    windowWidth=$(window).width();
 80    popHeight=$(".window").height();
 81    popWidth=$(".window").width();
 82 }
 83 //关闭窗口的方法
 84 function closeWindow(){
 85     $(".title img").click(function(){
 86         $(this).parent().parent().hide("slow");
 87         });
 88     }
 89     //定义弹出居中窗口的方法
 90     function popCenterWindow(){
 91         init();
 92         //计算弹出窗口的左上角Y的偏移量
 93     var popY=(windowHeight-popHeight)/2;
 94     var popX=(windowWidth-popWidth)/2;
 95     //alert(‘jihua.cnblogs.com‘);
 96     //设定窗口的位置
 97     $("#center").css("top",popY).css("left",popX).slideToggle("slow");
 98     closeWindow();
 99     }
100     function popLeftWindow(){
101         init();
102         //计算弹出窗口的左上角Y的偏移量
103     var popY=windowHeight-popHeight;
104     //var popX=-(windowWidth-popWidth);
105     //alert(popY);
106     //设定窗口的位置
107     $("#left").css("top",popY-50).css("left",50).slideToggle("slow");
108     closeWindow();
109     }
110     function popRightWindow(){
111         init();
112         //计算弹出窗口的左上角Y的偏移量
113     var popY=windowHeight-popHeight;
114     var popX=windowWidth-popWidth;
115     //alert(www.cnblogs.com/jihua);
116     //设定窗口的位置
117     $("#right").css("top",popY-50).css("left",popX-50).slideToggle("slow");
118     closeWindow();
119     } </script>
120 </body>
121 </html>

效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm

时间: 2024-11-05 16:42:28

jQuery弹出窗口完整代码的相关文章

[技术]打开网页弹出窗口的代码

经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项.版权信息.警告.欢迎光顾之类的话或者作者想要特别提示的信息.其实制作这样的页面效果非常的容易,只要往该页面的html里加入几段javascript代码即可实现.下面俺就带您剖析它的奥秘. [1.最基本的弹出窗口代码] 其实代码非常简单: <script language="javascript"> <!-- window.open ('pa

HTML页面弹出窗口调整代码总结

弹出跟你当前的窗口有没有菜单工具栏没有关系,你只要在页面中写一个脚本它就弹出了.比如<a href=# onclick="window.open('xxx.aspx','窗口名称','参数');">xxxxx</a> 以下列出一些弹出窗口的参数,你可自行设定,参数之间用逗号分隔 可选.字符串--列出对象表并用逗号分开.每一项都有自己的值,他们将被分开(如:"fullscreen=yes, toolbar=yes").下面是被支持的各种特性.

Jquery弹出窗口

今天讲了Jquery的弹出窗口的组成和用法: 先把引用文件的代码写好: // 每个弹窗的标识 var x =0; var idzt = new Array(); var Window = function(config){ //ID不重复 idzt[x] = "zhuti"+x; //弹窗ID //初始化,接收参数 this.config = { width : config.width || 300, //宽度 height : config.height || 200, //高度

jQuery 弹出窗口的形式一直是具体案件的中心

在网上查 多 不是不符合无效;因此,一些自己总结,解决这个问题 原则: 常见问题: 弹出层居中了,背景也是半透明的 可是发现一拉动滚动栏立即就露馅了发现背景仅仅设置了屏幕所在段,其它部分都是原来的样子,并且弹出层由于滚动栏移动不见了 这是网上大部分弹出层出现的普遍问题 问题解决的方法,有三种 1.利用IE6的漏洞,_top和使用css expresstion表达式 长处:不会抖动,通过计算得出位置,大部分浏览器都能够使用 缺点:不推荐使用css expresstion由于在做不论什么事件时css

jQuery 弹出窗口一直居中详细案例

在网上查了 很多 不是不符合就是效果不好;于是自己总结一番,解决此问题 原理: 常见问题: 弹出层居中了,背景也是半透明的 但是发现一拉动滚动条马上就露馅了发现背景只设置了屏幕所在段,其他部分都是原来的样子,而且弹出层因为滚动条移动不见了 这是网上大部分弹出层出现的普遍问题 问题解决办法,有三种 1.利用IE6的漏洞,_top和使用css expresstion表达式 优点:不会抖动,通过计算得出位置,大部分浏览器都可以使用 缺点:不推荐使用css expresstion因为在做任何事件时css

jquery 弹出窗口,锁定背景方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><title>新建网页</titl

jQuery弹出窗口插件FancyBox用法教程

1.引入jquery核心库和Fancybox插件库 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"(www.111cn.net)></script> <script type="text/javascript" src="/fancybox/jquery.fa

实用带多种CSS动画特效的jQuery弹出层插件hDialog.js

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel=&qu

JS弹出窗口代码大全(详细整理)

1.弹启一个全屏窗口 复制代码代码如下: <html> <body http://www.jb51.net','脚本之家','fullscreen');">; <b>www.jb51.net</b> </body> </html> 2.弹启一个被F11化后的窗口 复制代码代码如下: <html> <body 'http://www.jb51.net','脚本之家','channelmode');"