jquery弹出层完美居中

showDiv($("#pop"));

function showDiv(obj){
 $(obj).show();
 center(obj);
 $(window).scroll(function(){
  center(obj);
 });
 $(window).resize(function(){
  center(obj);
 });
}

function center(obj){
 var windowWidth = document.documentElement.clientWidth;
 var windowHeight = document.documentElement.clientHeight;
 var popupHeight = $(obj).height();
 var popupWidth = $(obj).width();
 $(obj).css({
  "position": "absolute",
  "top": (windowHeight-popupHeight)/2+$(document).scrollTop(),
  "left": (windowWidth-popupWidth)/2
 });
}
时间: 2024-10-01 18:20:51

jquery弹出层完美居中的相关文章

jQuery 弹出窗口一直居中详细案例

在网上查了 很多 不是不符合就是效果不好;于是自己总结一番,解决此问题 原理: 常见问题: 弹出层居中了,背景也是半透明的 但是发现一拉动滚动条马上就露馅了发现背景只设置了屏幕所在段,其他部分都是原来的样子,而且弹出层因为滚动条移动不见了 这是网上大部分弹出层出现的普遍问题 问题解决办法,有三种 1.利用IE6的漏洞,_top和使用css expresstion表达式 优点:不会抖动,通过计算得出位置,大部分浏览器都可以使用 缺点:不推荐使用css expresstion因为在做任何事件时css

实用带多种CSS动画特效的jQuery弹出层插件hDialog.js

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel=&qu

jquery弹出层

Ug,一个轻量级的js组件.web弹窗(层)解决方案 .网址:http://ug66.cn/ 效果预览: Ug,简洁的代码.灵活的自定义,您只需简单地调用,即可轻松实现各种弹出效果. Ug,她尽可能地以更少的代码展现出更强健的功能,让您的页面拥有更丰富与便捷的UI体验. Ug.格外注重性能的提升.易用和实用性. 鄙人必须中止“王婆卖瓜”的陈述,因为一切的不足或友好,都需阁下在使用过程中去发现. jquery弹出层,布布扣,bubuko.com

JQuery弹出层,实现弹层切换,可显示可隐藏。

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>jQuery弹出层效果</title> 5 <meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" /> 6 <meta c

JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery弹出层效果</title> <meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" /> <meta content="

有关jquery弹出层

http://www.jb51.net/article/35216.htm   源地址 今天用到了 JQuery 弹出层,看了很多东西, 对于其他的用插件的还得下载,想了想 还得下载, 于是就 找了个只用这个的JQuery/javascript 的代码, 自我感觉用起来方便 那么 这个网址就给自己留着吧~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T

【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css 来自定义外观. fancybox 特点: 可以支持图片.html 文本.flash 动画.iframe 以及 ajax 的支持: 可以自定义播放器的 css 样式: 可以以组的形式进行播放: 如果将鼠标滚动插件(mouse wheel plugin)包含进来的话 fancybox 还能支持鼠标滚轮滚

jQuery弹出层效果

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery弹出层效果</title><style>.black_overlay{di

效果非常好的 Jquery弹出层插件 jQuery Sweet alert

介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jquery Sweet Alert 使用方式也特别简单.粗暴,符合大众的jquery插件使用方法. 演示地址: http://www.xuetub.com/plugin/demo/111 欢迎大家去学徒帮分享更多jQuery插件,大家共同学习进步,帮助更多的小伙伴!!!