</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. java中文乱码解决之道（二）-----字符编码详解：基础知识 + ASCII + GB**

    在上篇博文(java中文乱码解决之道(一)-----认识字符集)中,LZ简单介绍了主流的字符编码,对各种编码都是点到为止,以下LZ将详细阐述字符集.字符编码等基础知识和ASCII.GB的详情. 一.基 ...

  2. 小型文件数据库 (a file database for small apps) SharpFileDB

    小型文件数据库 (a file database for small apps) SharpFileDB For english version of this article, please cli ...

  3. CSS效果集锦（持续更新中）

    高亮光弧效果 使用CSS3实现的一个高亮光弧效果,当鼠标hover到某一个元素上时,一道光弧从左向右闪过,效果如下: 代码如下: <!DOCTYPE html> <html lang ...

  4. EF：oracle的number类型映射为C#的boolean类型

    一开始用下面的方法映射, Property(p => p.IsFixed).HasColumnName("IS_FIXED").HasColumnType("num ...

  5. TODO：MongoDB MySQL数据库备份

    TODO:MongoDB MySQL数据库备份 1. MongoDB使用命令备份 mongodump进行整个数据库备份,主要用到的命令参数: -d 要备份的数据库 -o 输出的路径 ./mongodu ...

  6. 集群下session共享问题的解决方案.

    这一篇博客来讲解下babasport这个项目中使用的Login功能, 当然这里说的只是其中的一些简单的部分, 记录在此 方便以后查阅. 一: 去登录页面首先我们登录需要注意的事项是, 当用户点击登录按 ...

  7. MySQL_01之MySQL数据库基础

    1.通过SQL(结构化查询语言)操作数据库: DDL:数据定义语言,创建库,创建表,选择: DML:数据操作语言,完成数据增删改: DQL:数据查询语言,完成数据查询: DCL:数据控制语言,授权.回 ...

  8. 事务复制5： Transaction and Command

    事务复制使用 dbo.msrepl_transactions 和 dbo.MSrepl_commands 存储用于数据同步的Transaction和Command.在replication中,每个co ...

  9. 专业上的常用的工具和类库集 By 老衣

    Visual Studio 2013 扩展 CodeMaid: 可快速整理代码文件,清理不必要的代码和杂乱的格式.并在开发时实时提供代码复杂度的报告,以便帮助开发人员降低代码复杂度.提高代码质量. C ...

  10. Android中activity背景色的设置

    Android应用开发——系统自带样式Android:theme •android:theme="@android:style/Theme.Dialog"   将一个Activit ...