弹层相对于浏览器窗口（或屏幕）居中

三、弹层相对于浏览器窗口（或屏幕）居中：

可将弹层对应的dom作为body第一层子元素，然后给弹层设置样式：

{   background-color: #fff;
    left: 50%;
    margin: -高/2 0 0 -宽/2;
    position: fixed;
    top: 50%;
    width: 300px;
    height: 300px;
    z-index: 25;
}
PS:
1、margin的值设置： -(元素的实际高度/2) 0 0 -(元素的实际宽度/2);
2、该元素的宽高如果被内部元素撑开，也可不写；
时间： 2024-08-25 14:34:47

弹层相对于浏览器窗口（或屏幕）居中的相关文章

javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等

主要介绍了javascript获取和判断浏览器窗口.屏幕.网页的高度.宽度等 scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度offsetLeft:获取对象相对于版面或由 offsetPare

Javascript：获取浏览器窗口和屏幕的可用宽高

1.获取浏览器窗口的有效宽高(不包括工具栏和滚动条) 注:对于绝大部分浏览器使用window.innerWidth即可获取宽度,使用document.documentElement.clientWidth || document.body.clientWidth 为了实现对IE6,7的支持. 高度同上. var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var

[Selenium]通过Selenium实现在当前浏览器窗口点击一个图标之后，弹出另外一个窗口，关闭这个窗口，再回到原来的窗口进行操作

public void clickReportIcon(){ String initialWindowHandle = driver.getWindowHandle(); //保存原始的浏览器窗口 page.getReportIcon().click(); //这个操作之后将会弹出另外一个浏览器窗口 Set <String> set = driver.getWindowHandles(); set.remove(initialWindowHandle); assert set.size()==

让div垂直居中于浏览器窗口

<style type="text/css">  div  {   position:absolute;   top:50%;   left:50%;   margin:-150px 0 0 -200px;   width:400px;   height:300px;   border:1px solid #008800; } </style><div>让层垂直居中于浏览器窗口</div> 其实解决的思路是这样的:首们需要position

Qt窗口屏幕居中显示（有专门的QDesktopWidget，先计算后显示）

窗口的屏幕居中显示问题,在各开发工具中原理相同,首先使用特定的方法得到显示屏幕的宽度和高度,再根据窗口本身的宽度和高度计算出窗口的左上角坐标位置. Qt中可以采用两种方法达到窗口的屏幕居中显示: 方法一: 显示前先计算出窗口显示位子,并移到对应位子后再显示窗口 int main(int argc, char *argv[]){ QTextCodec::setCodecForTr(QTextCodec::codecForName("GB18030")); QApplication a(a

JavaScript基础 window.open(url,name,options) 弹出一个 新窗口 屏幕居中显示 获取屏幕的有效宽度

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut

js制作带有遮罩弹出层实现登录小窗口

要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并且遮罩层笼罩整个页面,使整个页面的其他元素暂时失去行为. 遮罩层的实现:相对于body绝对定位,宽度和高度都和body相同,并且有一定的透明度,使得下面的元素能够被看到.原先的元素的z-index为0,遮罩层的z-index在弹出登录小窗口和原先元素的之间. 说的不是很清楚,还是看代码吧! <!DO

关闭layer弹出层，刷新父窗口 - 官方没有说这个， 但是很有用。

关闭layer弹出层,刷新父窗口,火狐提示:NS_ERROR_XPC_SECURITY_MANAGER_V错误 原代码如 下: window.parent.location.reload(); //window.parent.location.href="/file/list" var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); 解决方案: 利用end函数 layer.open(

在浏览器窗口上添加一个遮罩层

背景 在web2.0中,页面弹窗是一个很常见的交互方式,这样既可以避免不必要的页面跳转,也可以改进界面的布局和可交互性. 但是,浏览器原生的弹窗函数(alert, confirm, prompt)有着很大的局限性,主要是它们的展现UI一来很不美观,二来也不够灵活,因此,我们经常需要自行定义弹窗函数. 当我们要实现一个模式弹窗时(模式弹窗,即是说出现弹窗时,页面其它地方不可点击),通常的做法是用一个div将整个页面窗口遮挡住. 实现 下面,我们一步步地实现一种较为简洁有效的遮罩层: Step 1: