</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. MySQL 对比数据库表结构

    200 ? "200px" : this.width)!important;} --> 介绍 本章主要介绍怎样对比数据库的表结构的差异,这里主要介绍使用mysqldiff工具 ...

  2. Azure PowerShell (8) 使用PowerShell设置Azure负载均衡器规则

    <Windows Azure Platform 系列文章目录> 注意:如果Azure面对的客户只是企业级客户,企业级客户使用NAT设备访问Internet的话,因为多个客户端使用相同的So ...

  3. [Linux]Linux下安装和配置solr/tomcat/IK分词器 详细实例一.

    在这里一下讲解着三个的安装和配置, 是因为solr需要使用tomcat和IK分词器, 这里会通过图文教程的形式来详解它们的安装和使用.注: 本文属于原创文章, 如若转载,请注明出处, 谢谢.关于设置I ...

  4. iOS-多线程基础

    进程与线程: 1>   一个应用程序对应一个进程,一个进程帮助程序占据一块存储空间 2>   要想在进程中执行任务,就必须开启线程,一条线程就代表一个任务 3>   一个进程中允许开 ...

  5. Exception：HTTP Status 500 - org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)

    主要错误信息如下: HTTP Status 500 - org.apache.ibatis.binding.BindingException: Invalid bound statement (not ...

  6. Leetcode-463 Island Perimeter

    #463. Island Perimeter You are given a map in form of a two-dimensional integer grid where 1 represe ...

  7. Derived Column 用法

    Derived Column Component 用法是为数据流增加派生列,Derived column  有两种用法:add as new column 或 replace . 图中,增加一个 De ...

  8. 一篇通俗易懂的CSS层叠顺序与层叠上下文研究

    网上有很多这方面的教程,但不是苦涩难懂就是从哪copy过来的,反正很长一段时间我是没看懂,时间长了也没打算去研究了,主要原因是,基本上很少会遇到那些问题(所以说啊,要是没有研究精神的才懒得管它).但自 ...

  9. [c++] Class

    也是醉了,一个.h文件就有这么多细节问题: 初始化列表,使用{} 也可以. 类中的引用和const变量,必须立即在初始化列表中提前初始化. 常成员函数,const 放在函数后, 常成员函数即不能改变成 ...

  10. 自制 移动端 纯原生 Slider滑动插件

    在Google搜关键字“slider”或“swiper”能找到一大堆相关插件,自己造轮子是为了能更好的理解其中的原理. 给这个插件取名为“veSlider”是指“very easy slider”非常 ...