</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. 作业三: 代码规范、代码复审、PSP

    分) 对于是否需要有代码规范,请考虑下列论点并反驳/支持: 这些规范都是官僚制度下产生的浪费大家的编程时间.影响人们开发效率, 浪费时间的东西. 我是个艺术家,手艺人,我有自己的规范和原则. 规范不能 ...

  2. [nRF51822] 7、基础实验代码解析大全（前十）

    实验01 - GPIO输出控制LED 引脚输出配置:nrf_gpio_cfg_output(LED_1); 引脚输出置高:nrf_gpio_pin_set(LED_1); 引脚电平转换:nrf_gpi ...

  3. Self Host模式下的ASP. NET Web API是如何进行请求的监听与处理的？

    构成ASP.NET Web API核心框架的消息处理管道既不关心请求消息来源于何处,也不需要考虑响应消息归于何方.当我们采用Web Host模式将一个ASP.NET应用作为目标Web API的宿主时, ...

  4. Dash文档制作教程

    前言 什么是Dash 面向程序员的文档库(Mac) 代码片段管理工具 这是强烈推荐给每天在各种API文档中摸爬滚打的程序员们的神器. 为什么要自己制作文档 官方的源中没有相关文档 文档在离线下体验更好 ...

  5. 【VC++技术杂谈008】使用zlib解压zip压缩文件

    最近因为项目的需要,要对zip压缩文件进行批量解压.在网上查阅了相关的资料后,最终使用zlib开源库实现了该功能.本文将对zlib开源库进行简单介绍,并给出一个使用zlib开源库对zip压缩文件进行解 ...

  6. PMO是什么？如何与其他部门协作配合提高项目成功率？

    许多公司里,有许多IT项目,特别是在软件公司里,许多开发团队并没有运用灵敏开发来进行项目办理.在某些状况下,尤其在一些公司里IT不是很受注重的,只能作为一个事务支撑部分,灵敏团队面对的首要疑问,是缺少 ...

  7. Elasticsearch 5.0 —— Head插件部署指南

    使用ES的基本都会使用过head,但是版本升级到5.0后,head插件就不好使了.下面就看看如何在5.0中启动Head插件吧! 官方粗略教程 Running with built in server ...

  8. Oracle 多行转多列,列值转为列名

    前段时间做调查问卷,客户创建自定义问卷内容,包括题目和选项内容; 之后需要导出问卷明细,,,,麻烦来咯 于是到网上到处搜索,没有直接结果;于是又找各种相似的,,终于功夫不负有心人 然后最终自己写出来了 ...

  9. C#实现二维码功能，winform 以及 asp.net均可以用

    二维码现在用途很多,怎么用C#编程生成呢? 准备 ThoughtWorks.QRCode.dll 需要 一个类 QRCode,这个类专门来生成二维码的 using System; using Syst ...

  10. Nginx配置文件nginx.conf详解

    #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; #全局错误日志定义类型,[ debug | ...