</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. 《HiWind企业快速开发框架实战》（1）框架的工作原理

    <HiWind企业快速开发框架实战>(1)框架的工作原理 1.HiWind架构 HiWind的基本架构如下: 持久层部分:同时为框架本身的业务服务,也为开发人员的自定义业务服务. 逻辑层: ...

  2. Tomcat的目录结构

    bin:该目录下存放的是二进制可执行文件,如果是安装版,那么这个目录下会有两个exe文件:tomcat6.exe.tomcat6w.exe,前者是在控制台下启动Tomcat,后者是弹出UGI窗口启动T ...

  3. com.android.build.api.transform.TransformException: com.android.builder.packaging.DuplicateFileException: Duplicate files copied in APK assets/com.xx.xx

    完整的Error 信息(关键部分) Error:Execution failed for task ':fanwe_o2o_47_mgxz_dingzhi:transformResourcesWith ...

  4. Atitit webservice的发现机制 discover机制

    Atitit webservice的发现机制 discover机制 1.1. Ws disconvert 的组播地址和端口就是37021 1.2. Ws disconvert的发现机制建立在udp组播 ...

  5. java 成长之路

    分享总结 title: java 成长之路 tags: grammar_cjkRuby: true 经验差异 1-3年 要求 建议 3-5年 建议 5年+ 经验差异 最近一年比较忙,经历了创业公司的倒 ...

  6. 这台计算机上缺少此项目引用的 NuGet 程序包-缺少的文件是 ..\packages\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.1.0.0\build\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.props

    异常处理汇总-开发工具  http://www.cnblogs.com/dunitian/p/4522988.html 协助开发里面总有几个是极简爱好者,但是呢删了不该删的就会影响项目开发,下面看下完 ...

  7. Sql Server系列：排序函数

    在SQL Server中有4个排序函数:ROW_NUMBER().RANK().DENSE_RANK()及NTILE()函数. 1. ROW_NUMBER()函数 ROW_NUMBER()函数为每条记 ...

  8. css 权重

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

  9. 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

    × 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...

  10. 在 ML2 中配置 VXLAN - 每天5分钟玩转 OpenStack（110）

    上一节我们介绍了 VXLAN 的基本概念,今天介绍如何在 ML2 中启用 VXLAN. 在 /etc/neutron/plugins/ml2/ml2_conf.ini 设置 vxlan network ...