jQuery弹出窗口完整代码(居中,居左,居右)

 更新时间:2012年10月10日 00:53:39   作者:  
jQuery弹出窗口完整代码,可以实现窗口居中,居左,居右显示,比较不错,需要的朋友可以参考下
核心代码:
复制代码 代码如下:

//获取窗口的高度
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('www.jb51.net');
//设定窗口的位置
$("#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();
}

完整代码:

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

作者 cnblogs jihua

相关文章

  • 用jQuery实现的模拟下拉框代码

    用jQuery实现的模拟下拉框代码

    用jQuery制作模拟下拉框 浏览器自带的 下拉框样式不好看。在ie6下,下拉框的优先级大于层,经常导致下拉框显示在层的上面。
    2010-03-03
  • jQuery使用getJSON方法获取json数据完整示例

    jQuery使用getJSON方法获取json数据完整示例

    这篇文章主要介绍了jQuery使用getJSON方法获取json数据,结合完整实例形式分析了getJSON方法读取与遍历json文件数据的相关技巧,需要的朋友可以参考下
    2016-09-09
  • jQuery通过Ajax返回JSON数据

    jQuery通过Ajax返回JSON数据

    最近在使用JQuery的ajax方法时,要求返回的数据为json数据,在处理的过程中遇到下面的几个问题,那就是采用不同的方式来生成json数据的时候,在$.ajax方法中应该是如何来处理的,下面依次来进行说明。
    2015-04-04
  • jquery 新浪网易的评论块制作

    jquery 新浪网易的评论块制作

    新浪网易的评论块制作 因为 textarea里面不能放图片,所以和新浪的做法一样,选用iframe放内容,然后隐藏一个 textarea用于提交。
    2010-07-07
  • jQuery弹框插件使用方法详解

    jQuery弹框插件使用方法详解

    这篇文章主要为大家详细介绍了jQuery弹框插件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • jQuery实现切换页面布局使用介绍

    jQuery实现切换页面布局使用介绍

    在很多网站尤其在一些购物网站上,展示商品的列表页提供了许多商品,用户可以选择商品的展示方式如列表方式展示和橱窗方式展示等。在本例中,将给您讲述如何实现这种效果
    2011-10-10
  • jQuery制作效果超棒的手风琴折叠菜单

    jQuery制作效果超棒的手风琴折叠菜单

    这篇文章主要介绍了jQuery制作效果超棒的手风琴折叠菜单的效果,这里推荐给大家,有需要的小伙伴可以参考下
    2015-04-04
  • jquery动态增加删减表格行特效

    jquery动态增加删减表格行特效

    这篇文章主要介绍了jquery动态增加删减表格行特效实现代码,
    2015-11-11
  • jQuery实现侧边导航栏及滑动电梯效果(仿淘宝)

    jQuery实现侧边导航栏及滑动电梯效果(仿淘宝)

    这篇文章主要介绍了如何利用JQuery+CSS模拟淘宝实现侧边导航栏以及滑动电梯效果,文中的示例代码讲解详细,感兴趣的小伙伴可以动手试一试
    2022-03-03
  • jquery.uploadify插件在chrome浏览器频繁崩溃解决方法

    jquery.uploadify插件在chrome浏览器频繁崩溃解决方法

    这篇文章主要介绍了jquery.uploadify插件在chrome浏览器频繁崩溃解决方法,十分的实用,遇到相同问题,需要解决的朋友可以参考下
    2015-03-03

最新评论