`

Jquery实现窗口居中

 
阅读更多

.big为要居中显示的div

 

            /*
            *根据当前页面与滚动条位置,设置提示对话框的Top与Left
            */
            function showDialog() {
                var objW = $(window); //当前窗口
                var objC = $(".big"); //对话框
                var brsW = objW.width();
                var brsH = objW.height();
                var sclL = objW.scrollLeft();
                var sclT = objW.scrollTop();
                var curW = objC.width();
                var curH = objC.height();
                //计算对话框居中时的左边距
                var left = sclL + (brsW - curW) / 2;
                //计算对话框居中时的上边距
                var top = sclT + (brsH - curH) / 2;
                //设置对话框在页面中的位置
                objC.css({ "left": left, "top": top });
            }

分享到:
评论

相关推荐

    jquery实现居中可拖拽窗体

    本文将详细解析"jquery实现居中可拖拽窗体"这一主题,帮助你理解如何利用jQuery创建一个可以居中显示并允许用户拖动的窗口。 首先,让我们了解基本的HTML结构。在实现居中可拖拽窗体时,你需要一个包含标题和内容的...

    jquery实现图片居中裁剪

    4. **响应式调整**:如果希望在不同屏幕尺寸下都保持图片居中裁剪,可以使用`jQuery`的`resize`事件监听窗口大小变化,并重新计算和设置图片位置。 ```javascript $(window).resize(function() { // 重复上述...

    jQuery遮罩弹窗居中

    总的来说,“jQuery遮罩弹窗居中”是前端开发中一个实用的技巧,通过结合jQuery和CSS定位,可以实现弹窗在不同屏幕尺寸下的自动居中,提升用户界面的交互体验。对于开发者来说,理解和掌握这一技术对于优化网页交互...

    jquery实现让弹出层绝对居中

    本文将详细介绍如何使用jQuery实现弹出层的绝对居中。 首先,我们需要理解页面布局的基本概念。在HTML和CSS中,定位(positioning)是决定元素在页面上位置的关键。常见的定位方式有静态定位(static)、相对定位...

    jQuery的div 重直水平居中

    jQuery结合CSS可以提供灵活的方法来实现垂直和水平居中,无论是对于固定尺寸的div还是响应式的流体div。本篇将详细介绍如何使用jQuery和CSS实现这一目标。 首先,我们从纯CSS解决方案开始。在CSS3中,我们可以利用`...

    jquery实现div上下左右居中显示的插件.zip

    标题中的“jquery实现div上下左右居中显示的插件.zip”指的是一个基于jQuery的JavaScript插件,用于在网页中使div元素实现垂直和水平居中显示。这种功能在网页设计和开发中非常常见,尤其在创建响应式布局或动态内容...

    jquery 弹出居中登录窗口,静止滚动 背景变灰色

    这个“jquery 弹出居中登录窗口,静止滚动 背景变灰色”的示例正是这样的功能实现。下面将详细解释这个功能背后涉及的jQuery、CSS和HTML知识点。 首先,`jQuery` 是一个广泛使用的JavaScript库,它简化了DOM操作、...

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

    实现弹出层不再难,只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如:我想要这里是弹出浮动遮罩层</div> 并随页面滚动而滚动 只要调用 $('#ok').showModel();这个方法就可以了 调用$('#ok')...

    基于jQuery实现的水平和垂直居中的div窗口

    1、通过css实现水平居中: 代码如下: .className{ margin:0 auto; width:200px; height:200px; } 2、通过css实现水平居中和垂直居中 通过css... } 3、通过jQuery实现水平居中和垂直居中前面已经提到过了,css的方法只

    jQuery点击遮罩弹出层固定居中代码.zip

    弹出层的宽度应根据内容动态调整,而垂直居中可以通过计算窗口高度和弹出层高度,然后设置适当的`margin-top`实现。水平居中可以使用`margin: auto`配合设置`display: block`或`flexbox`布局。 4. **响应式设计**:...

    jQuery实现模式窗口登录

    ### jQuery实现模式窗口登录 #### 知识点概述 本文将详细介绍如何利用jQuery库来创建一个弹出式登录对话框,这种登录对话框通常被称为模态窗口。此方法适用于Internet Explorer(IE)和Firefox浏览器,并且可以很...

    jquery实现图片弹出窗口特效,类似lightbox效果.rar

    本资源“jquery实现图片弹出窗口特效,类似lightbox效果.rar”是关于利用jQuery创建一个图片预览功能,类似于知名的Lightbox插件的效果。Lightbox是一种流行的技术,当用户点击网页上的图片链接时,图片会在一个半...

    jQuery实现不同弹窗大小均垂直居中效果.zip

    本项目“jQuery实现不同弹窗大小均垂直居中效果”旨在教你如何利用jQuery创建一个灵活的弹出窗口,无论窗口大小如何,都能在页面上保持垂直居中。 首先,我们需要理解jQuery的核心概念。jQuery通过选择器(如$("#id...

    jquery实现弹窗功能(窗口居中显示)

    在本篇指南中,我们将学习如何使用jQuery来实现一个总是居中显示在浏览器窗口中的弹窗功能。弹窗(对话框)是Web应用中非常常见的一个元素,用于向用户显示信息、收集用户输入或进行简单的交互。在用户体验设计中,...

    JQuery弹出恒定居中的窗口

    在这个项目中,开发者创建了一个jQuery插件,实现了弹出窗口并确保其在页面上始终居中显示的功能。 描述中提到,这个插件是为方便快速创建窗口而设计的,并且使用了网络上找到的功能按钮图像资源。这暗示了插件不仅...

    jquery实现垂直居中显示特效代码

    本篇文章将深入探讨如何使用jQuery和CSS结合实现垂直居中的效果,以及如何在网页模板中应用这些技术。 首先,我们需要理解垂直居中的基本概念。在CSS中,有多种方法可以实现垂直居中,如Flexbox、Grid布局、传统...

    jQuery实现弹窗居中效果类似alert()

    本文将介绍如何使用jQuery实现一个与JavaScript内置的alert()函数弹窗相似效果的弹窗,并且能够确保该弹窗在页面中始终居中显示。这个过程涉及到HTML、CSS以及jQuery的JavaScript库的使用。 首先,需要在HTML文档中...

    jQuery实现不同弹窗大小均垂直居中效果

    我们见过很多jQuery实现的弹出窗口效果,当然,比较大的插件要先排除在外。 弹窗的窗口往往需要事先固定好大小,也就是说宽度高度的css要先写死,这样的用户体验不大好 今天给大家推荐一个,无论你弹出窗口...

    VMiddleImg-jQuery图片居中裁切效果

    总结来说,VMiddleImg-jQuery图片居中裁切效果是网页设计中一个实用的技术,通过结合jQuery的灵活性和响应式设计的理念,实现了图片在各种环境下的优化展示。开发者可以根据项目需求,灵活运用这一工具,提升网站的...

    Jquery弹出div层窗口以及div屏幕居中,背景滤镜效果,div拖拽效果

    以上就是关于“jQuery弹出div层窗口、div屏幕居中、背景滤镜效果和div拖拽效果”的核心知识点。通过熟练掌握这些技巧,开发者可以创建更富有互动性和用户体验的网页应用。在实际开发中,还需要根据不同的项目需求,...

Global site tag (gtag.js) - Google Analytics