`
zjx2388
  • 浏览: 1330943 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

jquery 弹出框 当前页面 居中(有滚动条)

    博客分类:
  • Page
 
阅读更多

基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)

 

原理:
获取当前屏幕(窗体)的宽度和高度,因为不同浏览器的窗体大小是不一样的。有了这个,可以计算出来垂直居中的坐标。但是滑动了滚动条怎么依然垂直居中呢?这个时候就要获取当前窗体距离页面顶部的高度,加到刚刚的y轴坐标即可。
$(document)是获取整个网页的,$(window)是获取当前窗体的,这个要搞清楚。
最后把获取的坐标赋给窗体即可,窗体本身是绝对定位的,所以自然可以到窗体中间。

 

最重要的代码:

 

        var screenWidth = $(window).width();
        var screenHeight = $(window).height(); //当前浏览器窗口的 宽高
        var scrolltop = $(document).scrollTop();//获取当前窗口距离页面顶部高度
        var objLeft = (screenWidth - 2)/2 ;   //2 可以根据需要修改

        var objTop = (screenHeight - 100)/2 + scrolltop;  //100可以根据需要修改

 

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>弹出确认框始终位于窗口的中间位置的测试</title> 
<style type="text/css"> 
.mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; filter: alpha(opacity=50); display: none; z-index: 99; } 
.mess { position: absolute; display: none; width: 250px; height: 100px; border: 1px solid #ccc; background: #ececec; text-align: center; z-index: 101; } 
</style> 
<script type="text/javascript" src="jquery-1.6.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$('.btn').click(function() { 
$('.mask').css({'display': 'block'}); 
center($('.mess')); 
check($(this).parent(), $('.btn1'), $('.btn2')); 
}); 
// 居中 
function center(obj) { 
var screenWidth = $(window).width(), screenHeight = $(window).height(); //当前浏览器窗口的 宽高 
var scrolltop = $(document).scrollTop();(),//获取当前窗口距离页面顶部高度 
var objLeft = (screenWidth - obj.width())/2 ; 
var objTop = (screenHeight - obj.height())/2 + scrolltop; 
obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'}); 
//浏览器窗口大小改变时 
$(window).resize(function() { 
screenWidth = $(window).width(); 
screenHeight = $(window).height(); 
scrolltop = $(document).scrollTop(); 
objLeft = (screenWidth - obj.width())/2 ; 
objTop = (screenHeight - obj.height())/2 + scrolltop; 
obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'}); 
}); 
//浏览器有滚动条时的操作、 
$(window).scroll(function() { 
screenWidth = $(window).width(); 
screenHeight = $(widow).height(); 
scrolltop = $(document).scrollTop(); 
objLeft = (screenWidth - obj.width())/2 ; 
objTop = (screenHeight - obj.height())/2 + scrolltop; 
obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'}); 
}); 
} 
//确定取消的操作 
function check(obj, obj1, obj2) { 
obj1.click(function() { 
obj.remove(); 
closed($('.mask'), $('.mess')); 
}); 
obj2.click(function() { 
closed($('.mask'), $('.mess')); 
}) ; 
} 
// 隐藏 的操作 
function closed(obj1, obj2) { 
obj1.hide(); 
obj2.hide(); 
} 
}); 
</script> 
</head> 
<body> 
<input type="button" class="btn" value="btn"/> 
<div>弹出确认框始终位于窗口的中间位置的测试</div> 
<div class="mask"></div> 
<div class="mess"> 
<p>确定要删除吗?</p> 
<p><input type="button" value="确定" class="btn1"/> 
<input type="button" value="取消"class="btn2"/></p> 
</div> 
</body> 
</html> 

 

分享到:
评论

相关推荐

    jQuery 弹出层 浮动遮罩层 提示框 并随页面滚动而滚动

    jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难,只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如:我想要这里是弹出浮动遮罩层&lt;/div&gt; 并随页面...

    jbox 兼容jQuery1.9以上版本,解决弹出框位置错误问题

    然而,随着jQuery版本的更新,部分老版本的jBox可能会遇到与新版本不兼容的问题,特别是弹出框在有滚动条的页面中位置计算错误的情况。本文将深入探讨jBox如何在jQuery 1.9及以上版本中保持良好的兼容性,并解决弹出...

    jQuery手机端点击弹出层固定居中代码

    在本文中,我们将深入探讨如何使用jQuery实现在手机端点击后弹出居中显示的遮罩层,并且这个遮罩层能自适应不同尺寸的屏幕。这个功能在移动设备上的网页设计中非常常见,用于创建诸如提示信息、登录窗口或图片预览等...

    jquery 弹出模态窗体

    "jquery 弹出模态窗体"是jQuery中的一个功能,用于创建交互式用户体验,使得用户在不离开当前页面的情况下能够与额外的信息或功能进行交互。模态窗体(Modal Dialog)通常被用来显示警告、确认、信息或表单填写等...

    网页自动弹出框

    网页自动弹出框是网页设计中一种常见的交互方式,它能够吸引用户注意力并提供关键信息或功能。在网站开发中,实现这样的效果通常涉及到JavaScript、HTML和CSS这三种核心技术。 首先,HTML(HyperText Markup ...

    jQuery弹出层始终垂直居中相对于屏幕或当前窗口

    本文将详细介绍如何使用jQuery实现弹出层始终垂直居中,包括相对于屏幕和当前窗口两种情况。 首先,对于固定高度和宽度的弹出层,我们可以直接通过CSS样式实现居中,例如使用`margin: auto`和`position: absolute`...

    基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)

    但是滑动了滚动条怎么依然垂直居中呢?这个时候就要获取当前窗体距离页面顶部的高度,加到刚刚的y轴坐标即可。 $(document)是获取整个网页的,$(window)是获取当前窗体的,这个要搞清楚。 最后把获取的坐标赋给窗体...

    Jquery实现顶部弹出框特效

    jQuery 实现顶部弹出框特效是一种常见的网页交互设计,它能为用户提供直观且吸引人的信息提示。在这个特效中,弹出框从页面顶部以动画形式滑动出现,增加了用户体验的趣味性和互动性。下面我们将详细探讨如何使用 ...

    不随滚动条滚动的模式窗口

    在网页设计和开发中,"不随滚动条滚动的模式窗口"是一种常见的用户体验设计技术,它允许用户在当前页面上打开一个全屏或半屏的弹出窗口,而这个窗口不会随着页面的滚动条移动。这种效果常用于图片预览、表单填写、...

    jquery实现居中弹出层代码

    - `self._getTop()` 通过获取当前滚动条的位置并结合窗口高度和弹出层高度来计算垂直居中的顶部位置。 - `self._getLeft()` 直接使用页面宽度减去弹出层宽度,然后除以2来得到水平居中的左边位置。 4. 显示和隐藏...

    超实用的jQuery代码段

    1.30 页面加载后消息框居中显示 1.31 创建页面固定浮动栏的方法 第2章 jQuery操作DOM元素 2.1 如何验证某个元素是否为空 2.2 检查特定的HTML元素是否存在 2.3 判断HTML元素是否嵌套 2.4 获取当前元素的索引值 2.5 ...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    4.jQuery超炫淡入淡出效果DIV渐变居中弹出框插件下载 5.jquery黑色+蓝色风格DIV提示框示例 6.一款jQuery+DIV居中淡入淡出信息提示框示例 7.一款jQuery可拖动提示窗插件(对话框Dialog插件) 8.一款基于jQuery...

    jquery删除数据记录时的弹出提示效果

    jQuery实现删除数据记录时的弹出提示效果涉及前端开发中常见的用户交互方式,具体操作包括如何使用jQuery来显示和隐藏提示框、如何通过点击事件触发删除操作以及如何使提示框在页面中居中显示。下面将对这些知识点...

    JQuery实现的弹窗效果

    /* 添加滚动条,以防内容溢出 */ background-color: rgba(0,0,0,0.4); /* 半透明黑色背景 */ } .modal-content { background-color: #fefefe; margin: 15% auto; /* 自动居中 */ padding: 20px; border: 1px ...

    js弹出注册页面

    实现弹出注册页面的方法有很多,包括但不限于使用原生 JavaScript、jQuery、Bootstrap 模态框等。本案例采用的是原生 JavaScript 和 CSS 结合的方式。 #### 二、代码解析 **2.1 HTML 结构** ```html ... .....

    JS弹出层,js弹出DIV效果源码下载

    /* 使弹出层居中 */ width: 300px; height: auto; /* 弹出层大小 */ background-color: white; /* 背景颜色 */ border: 1px solid black; /* 边框 */ padding: 20px; /* 内容区边距 */ box-shadow: 0 0 10px ...

    jquery单击文字或图片内容放大并居中显示

    这里,我们不仅考虑了窗口的宽度和高度,还加入了滚动条的位置,以确保在有滚动条的情况下也能保持居中。 然后,将这些坐标应用到大图的CSS定位上,使其在页面中居中显示: ```javascript $('.alert').css({ ...

    jquery模态

    在Web开发中,模态框(Modal Dialog)是一种常见的交互元素,用于在用户当前浏览的页面上弹出一个半透明的窗口,以展示重要的信息、警告或进行确认操作。jQuery库提供了简单易用的API来创建和管理模态框,使得开发者...

Global site tag (gtag.js) - Google Analytics