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  
 }); 
}

赞 (0)

相关推荐

  • jquery 弹出层实现代码

    经过分析,网上的参考,终于搞定了~~ jQuery插件代码: 复制代码 代码如下: jQuery.fn.selectItem = function(targetId) { var _seft = this; var targetId = $(targetId); this.toggle( function() { var A_top = $(this).offset().top + $(this).outerHeight(true); // 1 var A_left = $(this).offs

  • jquery实现点击弹出层效果的简单实例

    jquery实现点击弹出层效果的简单实例

    弹出层在实际应用中我们经常会碰到大量的弹出层效果,下面我来做一个基于jquery的简单的弹出层效果实例,各位朋友有兴趣可参考. 效果代码如下: 在 弹出层 中下面是核心代码 复制代码 代码如下: <script type="text/javascript">// 渐变弹出层$(document).ready(function(){ var speed = 600;//动画速度 $("#race a").click(function(event){//绑定

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

    复制代码 代码如下: <input type="button" value="高级搜索" id="click_test4" />";var content4 = "<center>高级搜索</center><form action='' method='post' id='formUserSuperSearch'>"   + "用户名 :  <input

  • 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.d

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

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

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

  • 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实现弹出层效果

    jQuery实现弹出层效果

    本文实例为大家分享了jQuery实现弹出层的具体代码,供大家参考,具体内容如下 ###jQuery实现 弹出层效果 点击弹出层:弹出弹出层 点击阴影:关闭弹出层 点击"关闭"关闭弹出层 整体代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" cont

  • 基于JS实现点击图片在弹出层显示大图效果

    基于JS实现点击图片在弹出层显示大图效果

    Javascript是个好东西. Jquery是基于这个好东西的一个强大的库. 今天要实现的功能是基于这两个玩意儿的. 点击图片,在弹出层显示原图. 大概效果是这样的: 上代码: 先是html部分: <div style="text-align:center;margin-top:200px;"> <img src="https://guanchao.site/uploads/atricle/5db3a72e49efd.jpeg" alt=&quo

  • jQuery Layer弹出层传值到父页面的实现代码

    jQuery Layer弹出层传值到父页面的实现代码

    目前做的项目中用到layer弹层传值,弹层输入框输入文本,点击确定按钮,父页面的树结构,会自动添加分组. 在此粘贴下代码,以后遇到,方便回忆,如有疑问请留言,或许会为您解答 $(document).ready(function(){ //添加任务弹出层 addTask(); }); //弹出层 function addTask(){ $('[data-id="addList"]').on('click', function(){ layer.open({ type: 2,title:

  • 关于jquery layui弹出层的使用方法

    Jquery必须大于1.83 layui必须是all,否则不显示 <script src="../js/jquery-1.8.3.min.js"></script> <script src="../layui/layui.all.js"></script> html代码 <input id="about" type="button" value="修改考勤&quo

  • Jquery实现弹出层分享微博插件具备动画效果

    Jquery实现弹出层分享微博插件具备动画效果

    此Jquery插件是一款非常实用的特效,是很多网站不可缺少的推广神兵利器,传统的一般都用百度.加网的分享插件,但样式外观都不怎么好看,用户体验效果差一点,此作品不但有分享功能,还具备了动画效果,提高了用户体验.由于用了CSS3,为了可以看到插件的最佳效果,建议大家使用谷歌.火狐等浏览器... 作品包括以下功能: 1.弹出层 2.遮罩层 3.动画效果 4.CSS3 效果如下: 源码下载 代码片段(1) 复制代码 代码如下: $(document).ready(function(e) { var s

  • jquery原创弹出层折叠效果点击折叠弹出一个层

    jquery原创弹出层折叠效果点击折叠弹出一个层

    弹出层效果很多网站上都用到,今天就整理最近项目里用到的一个小效果,点击折叠弹出一个层给用户填写信息.弹出层代码都是jq动态创建,每个人写法都不一样,需求也不一样,所有选择符合自已的即可. html: 复制代码 代码如下: <h1 class="bm"><a href="javascript:;">我要报名</a></h1> 复制代码 代码如下: *{ margin:0; padding:0;} body{ font:1

  • js弹出层永远居中实现思路及代码

    js弹出层永远居中实现思路及代码

    弹出层窗口永远居中 复制代码 代码如下: <script type="text/javascript"> var isIE=window.XMLHttpRequest?false:true; var aIsIE={}; window.onload=function(){ if(isIE){ window.onscroll=doIE; window.onresize=doIE; } function doIE(){ aIsIE.top=document.documentEle

随机推荐