</html>

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   <html xmlns="http://www.w3.org/1999/xhtml">

   <head>

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   <title>jQuery弹出窗口</title>

   <meta name="keywords" />

   <style type="text/css">

  .window{

      width:250px;

      background-color:#d0def0;

      position:absolute;

      padding:2px;

      margin:5px;

      display:none;

      }

  .content{

      height:150px;

      background-color:#FFF;

      font-size:14px;

      overflow:auto;

     }

  .title{

      padding:2px;

      color:#0CF;

      font-size:14px;

      }

  .title img{

      float:right;

      }

  </style>

  <script type="text/javascript" src="jquery-1.7.1.min.js"></script>

  <script type="text/javascript" language="javascript">

      $(document).ready(function () {

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

              popCenterWindow();

         });

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

              popRightWindow();

          });

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

              popLeftWindow();

          });

      });

  </script>

  </head>

  <body>

   <div style="width:600px;margin-left:auto;margin-right:auto;margin-top:160px;">

  <input type="button" value="居中窗口" id="btn_center" />

  <input type="button" value="居左下角" id="btn_left" />

  <input type="button" value="居右下角" id="btn_right" />

  </div>

     <div class="window" id="center">

  <div id="title" class="title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />计划 博客园-居中窗口</div>

  <div class="content">jihua.cnblogs.com</div>

    </div> 

  <div class="window" id="left">

  <div id="title2" class="title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />计划 博客园-居左窗口</div>

  <div class="content">jihua.cnblogs.com</div>

    </div>

    <div class="window" id="right">

 <div id="title3" class="title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />计划 博客园-居右窗口</div>

  <div class="content">jihua.cnblogs.com</div>

    </div>

    <script type="text/javascript">

    //获取窗口的高度

  var windowHeight;

  //获取窗口的宽度

  var windowWidth;

  //获取弹窗的宽度

  var popWidth;

  //获取弹窗高度

  var popHeight;

  function init(){

     windowHeight=$(window).height();

     windowWidth=$(window).width();

     popHeight=$(".window").height();

     popWidth=$(".window").width();

 }

 //关闭窗口的方法

 function closeWindow(){

     $(".title img").click(function(){

         $(this).parent().parent().hide("slow");

         });

     }

    //定义弹出居中窗口的方法

     function popCenterWindow(){

         init();

         //计算弹出窗口的左上角Y的偏移量

     var popY=(windowHeight-popHeight)/2;

     var popX=(windowWidth-popWidth)/2;

    //alert('jihua.cnblogs.com');

     //设定窗口的位置

    $("#center").css("top",popY).css("left",popX).slideToggle("slow");

     closeWindow();

     }

     function popLeftWindow(){

        init();

         //计算弹出窗口的左上角Y的偏移量

     var popY=windowHeight-popHeight;

    //var popX=-(windowWidth-popWidth);

     //alert(popY);

     //设定窗口的位置

     $("#left").css("top",popY-50).css("left",50).slideToggle("slow");

     closeWindow();

     }

     function popRightWindow(){

        init();

        //计算弹出窗口的左上角Y的偏移量

     var popY=windowHeight-popHeight;

     var popX=windowWidth-popWidth;

     //alert(www.cnblogs.com/jihua);

     //设定窗口的位置

     $("#right").css("top",popY-50).css("left",popX-50).slideToggle("slow");

     closeWindow();

    } </script>

 </body>

</html>

jquery完整弹窗代码的更多相关文章

  1. JQuery+EasyUI弹窗代码

    来源:http://www.cnblogs.com/taven/p/3330125.html <head>需要引用的文件: <link href="../JS/EasyUi ...

  2. JQuery实现分页程序代码

    JQuery实现分页程序代码 做Web开发的程序员,分页时在所难免的,微软GridView.AspPager等设置分页数据可以自动分页,但是这里浏览器会闪动,用户体验不是很友好,在此我整理了JQuer ...

  3. js 技巧 （六）弹窗代码汇总

    弹窗代码汇总 [0.超完美弹窗代码] 功能:5小时弹一次+背后弹出+自动适应不同分辩率+准全屏显示 代码: <script> function openwin(){ window.open ...

  4. 轻量级jQuery语法高亮代码高亮插件jQuery Litelighter。

    <!DOCTYPE html><html><head><meta charset="UTF-8" /><title>jQ ...

  5. 谷歌开源项目Google Preview Image Extractor(PIEX) (附上完整demo代码)

    前天偶然看到谷歌开源项目中有一个近乎无人问津的项目Google Preview Image Extractor(PIEX) . 项目地址: https://github.com/google/piex ...

  6. 在线运行Javascript,Jquery,HTML,CSS代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xht ...

  7. 18款js和jquery文字特效代码分享

    18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...

  8. JQuery 插件 - 弹窗：BlockUI

    JQuery的弹窗插件,网上实在有很多做的比较好的,比如artDialog.layer,甚至EasyUI等等.这些在效果上做的非常好.但我觉得一个小小的弹窗提示,没有必要引用这些(其实是有点大材小用了 ...

  9. [JS]九种网页弹窗代码

    [1.最基本的弹出窗口代码] 其实代码非常简单: <SCRIPT LANGUAGE="javascript"><!--window.open ("pag ...

随机推荐

  1. 玩转Windows服务系列——服务运行、停止流程浅析

    通过研究Windows服务注册卸载的原理,感觉它并没有什么特别复杂的东西,Windows服务正在一步步退去它那神秘的面纱,至于是不是美女,大家可要睁大眼睛看清楚了. 接下来研究一下Windows服务的 ...

  2. 新功能发布！Markdown写博客！

    有一种神奇的语言,它比html还简单,它巧妙地将内容与格式整合在一起--它就是Markdown. 现在我们实现了博客对Markdown的内置支持,可以让您轻松地在园子里用这个神奇的语言写博客! &qu ...

  3. 掀起你的盖头来：Unit Of Work-工作单元

    写在前面 阅读目录: 概念中的理解 代码中的实现 后记 掀起了你的盖头来,让我看你的眼睛,你的眼睛明又亮呀,好像那水波一模样:掀起了你的盖头来,让我看你的脸儿,看看你的脸儿红又圆呀,好像那苹果到秋天. ...

  4. “安装项目” Step By Step

    目录 一 基本操作 二 定制安装对话框 三 安装程序类 四 总结 .NET程序集因为包含了元数据,所以程序集具有自描述性.多数程序自身包含了运行所需要的全部信息,这类程序集就是我们常说的“绿色软件”. ...

  5. [ASP.NET MVC 小牛之路]13 - Helper Method

    我们平时编程写一些辅助类的时候习惯用“XxxHelper”来命名.同样,在 MVC 中用于生成 Html 元素的辅助类是 System.Web.Mvc 命名空间下的 HtmlHelper,习惯上我们把 ...

  6. 固定Table的头部和左边的列-在Knockout Js使用场景下

    要求:固定Table的头部和左边的列 场景:Knockout Js被用于绑定Table的数据源. 固定HTML表格的头部和列是一个很常见的需求.此文:http://www.cnblogs.com/so ...

  7. Eclipse 常用快捷键 (动画讲解)

    Eclipse有强大的编辑功能, 工欲善其事,必先利其器, 掌握Eclipse快捷键,可以大大提高工作效率.  编辑相关快捷键 注释          Ctrl + / 快速修复    Ctrl + ...

  8. iOS --------Crash 分析（一）

    iOS Crash 分析(文一)- 开始 1. 名词解释 1. UUID 一个字符串,在iOS上每个可执行文件或库文件都包含至少一个UUID.目的是为了唯一识别这个文件. 2. dwarfdump 苹 ...

  9. 修改Credentials 密码

    今天,Leader 吩咐要修改管理账户的密码,我负责的Part是修改package和 Replication的Job的密码.仔细想了下,由于我们使用的Windows验证方式,而Job在执行时,是使用P ...

  10. OPEN CASCADE Multiple Variable Function

    OPEN CASCADE Multiple Variable Function eryar@163.com Abstract. Multiple variable function with grad ...