jquery实现弹出层完美居中效果_jquery

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-09-26 13:55:40

jquery实现弹出层完美居中效果_jquery的相关文章

jquery实现弹出层完美居中效果

 本篇文章主要是对jquery弹出层居中效果的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 jquery实现弹出层完美居中效果    代码如下: showDiv($("#pop")); function showDiv(obj){  $(obj).show();  center(obj);  $(window).scroll(function(){   center(obj);  });  $(window).resize(function(){   center(

jquery函数:网页弹出层完美居中的函数

文章简介: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.clie

jquery pop弹出层下拉效果实现

jquery pop弹出层下拉效果实现 注:本文章末提供jquery文件,自己下载一个就可以了. <!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">

jquery实现弹出层效果实例

  本文实例讲述了jquery实现弹出层效果的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70

jquery实现弹出层遮罩效果的简单实例

 这篇文章主要介绍了jquery实现弹出层遮罩效果的简单实例.需要的朋友可以过来参考下,希望对大家有所帮助 代码如下: <input type="button" value="高级搜索" id="click_test4" />"; var content4 = "<center>高级搜索</center><form action='' method='post' id='formUse

jquery实现弹出层效果实例_jquery

本文实例讲述了jquery实现弹出层效果的方法.分享给大家供大家参考.具体实现方法如下: <head runat="server"> <title>jQuery弹出层</title> <script type="text/javascript" src="js/jquery-1.3.2-min.js"></script> <script type="text/javasc

jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)_jquery

弹出层主要用于展示丰富的页面信息,还有一个更好的应用是弹出表单层丰富交互应用.常见的应用有弹出登录表单层,用户提交登录信息,后台验证登录成功后,弹出层消失,主页面局部刷新用户信息.本文我们将给大家介绍如何使用jQuery+Ajax+PHP弹出层异步登录的应用. 效果展示        源码下载 HTML 由于本例UI部分使用了Bootstrap,以及使用jQuery插件,因此需要事先载入相关文件,推荐大家使用相关的CDN资源. <link rel="stylesheet" hre

JQuery.Boxy 弹出层的实例

 代码如下 复制代码 <!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>     <title></t

jquery dialog 弹出层内容错误

问题描述 jquery dialog 弹出层内容错误 弹出框时不时的弹出父页面的内容,经过测试与页面表格样式无关,忘有大神帮忙解决一下. 解决方案 jQuery弹出层插件DialogJquery UI dialog弹出层插件jquery dialog-优雅的弹出框 解决方案二: <!DOCTYPE html><html xmlns=""http://www.w3.org/1999/xhtml""><head> <meta h