无论屏幕分辨率如何,如何使 javascript css 弹出 div 居中?

2024-04-02

我有以下代码,它在禁用背景的同时打开一个新的弹出窗口,问题是我必须将其定位,使其距顶部 100px(已经通过 CSS #dialog 获得)并且位于屏幕中央,无论用户的分辨率是多少?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <script type="text/javascript">
        function showPopUp(el) {
            var cvr = document.getElementById("cover")
            var dlg = document.getElementById(el)
            cvr.style.display = "block"
            dlg.style.display = "block"
            if (document.body.style.overflow = "hidden") {
                cvr.style.width = "1024"
                cvr.style.height = "100%"
            }
        }
        function closePopUp(el) {
            var cvr = document.getElementById("cover")
            var dlg = document.getElementById(el)
            cvr.style.display = "none"
            dlg.style.display = "none"
            document.body.style.overflowY = "scroll"
        }
    </script>
    <style type="text/css">
        #cover {
            display:        none;
            position:       absolute;
            left:           0px;
            top:            0px;
            width:          100%;
            height:         100%;
            background:     gray;
            filter:         alpha(Opacity = 50);
            opacity:        0.5;
            -moz-opacity:   0.5;
            -khtml-opacity: 0.5
        }

        #dialog {
            display:    none;
            left:       100px;
            top:        100px;
            width:      300px;
            height:     300px;
            position:   absolute;
            z-index:    100;
            background: white;
            padding:    2px;
            font:       10pt tahoma;
            border:     1px solid gray
        }
    </style>
</head>
<body>
<div id="cover"></div>
<div id="dialog">
    My Dialog Content
    <br><input type="text">
    <br><input type="button" value="Submit">
    <br><a href="#" onclick="closePopUp('dialog');">[Close]</a>
</div>
<a href="#" onclick="showPopUp('dialog');">Show</a>

</body>
</html>

基于 CSS中心解:

您需要使用这些样式使其看起来处于死点:

position:absolute;
top:50%;
left:50%;
width:400px;  /* adjust as per your needs */
height:400px;   /* adjust as per your needs */
margin-left:-200px;   /* negative half of width above */
margin-top:-200px;   /* negative half of height above */

So position应具体说明。这top and left应该50%. The margin-left and margin-top应分别为盒子宽度和高度的负二分之一。

请注意,如果您希望弹出窗口即使在页面滚动时也显示在中心,则必须使用position:fixed相反,它的缺点是它在 IE6 中不起作用。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

无论屏幕分辨率如何,如何使 javascript css 弹出 div 居中? 的相关文章

  • Sails.js - 如何更新嵌套模型

    attributes username type email validated by the ORM required true password type string required true profile firstname s
  • 是否可以将自定义 HTML 添加到传单图层组和图层控件

    有什么方法可以将自定义 HTML 注入图层组和图层控件中吗 在我们的应用程序中 我们实现了滑块 输入 范围 来调整不透明度设置 并且很明显 在其控制容器内部的基础层上使用专用滑块是有意义的 没有选项或参数可以修改此控件 理想情况下 我们希望
  • Amcharts 图表 - 图表列到自定义 URL 的超链接以在新选项卡/窗口中打开

    我正在尝试制作一个 amcharts 图表 其中的列链接到自定义网址 并希望网址在新选项卡 窗口中打开 我尝试将此代码添加到图形对象中 但它不起作用 它在同一选项卡 窗口中打开链接 listeners event clickItem met
  • getElementsByClassName & IE8:对象不支持此属性或方法[重复]

    这个问题在这里已经有答案了 I know getElementsByClassName 不支持IE8 你知道我可以用什么来代替吗 我因错误而变得烦人 对象不支持此属性或方法 HTML 代码是 function sumar var elems
  • SVG 中三角形的圆角

    我正在尝试制作一个具有圆角的三角形 三角形将如下所示 左下角是唯一看起来相当容易制作的角 主要是因为这是一个 90 度的 转弯 该转弯是使用QSVG 中的命令具有以下参数 Q x y height x y height RADIUS从我正在
  • 如何在 javascript 或 jquery 中按尺寸对图像进行排序

    如何在 JavaScript 或 jQuery 中按尺寸对图像进行排序 我的代码如下 var imgsrc if document images length lt 1 alert No images to open return for
  • JavaScript 原型 - 请澄清

    有人可以帮我理解原型属性吗 我不明白原型属性是函数的属性还是函数内部的属性 假设我们创建以下构造函数 Food 此时 函数 Food 具有 Food prototype 属性 由于 Food 是 Object 的实例 因此这意味着 Obec
  • 如何删除从 javascript var 转义的反斜杠?

    我有这个变量 var x div class Which is div class 但是我需要 div class abcdef 我怎样才能 unes cape 这个变量来删除所有转义字符 您可以通过正则表达式将反斜杠后跟引号替换为仅引号
  • 模型不是 AngularJS 中输入的日期对象

    使用 AngularJS 我试图使用输入显示日期type date
  • 使用 Javascript eval() 100% 安全吗?

    我正在编写一个生成 Javascript 代码的 PHP 库 Javascript 代码有许多名为component001 component002 etc 页面通过 AJAX 动态加载 我需要通过 URL 变量传递组件的名称 然后由脚本进
  • 在 jQuery 中获取 CSS 规则的百分比值

    假设规则如下 largeField width 65 有没有办法以某种方式恢复 65 而不是像素值 Thanks EDIT 不幸的是 在我的例子中使用 DOM 方法是不可靠的 因为我有一个导入其他样式表的样式表 因此cssRules参数以以
  • 如何正确删除动画集中引用的 Raphael SVG 元素?

    我有一组动画 Raphael SVG 元素 我正在通过用户发起的 ajax 调用添加新元素并删除旧元素 我 set push 新元素 但因为我需要删除的元素通常不是集合中的最后一个元素 所以我使用 element remove 而不是 se
  • 使用 javascript 调整图像大小以在画布 createPattern 中使用

    我见过一些关于如何调整图像大小的技巧 在 IMG 标签内使用 但我想在里面有一个图像变量 一个 Javascript 调整它的大小 然后使用 a 中的图像 context createPattern 图像 重复 我还没有找到任何提示 关于如
  • 大型应用的回流/布局性能

    我正在使用 GWT 构建一个 HTML 应用程序 其性能总体上是正确的 有时 它会加载 DOM 中的许多对象 并且应用程序会变得很慢 我使用 Chrome 开发者工具分析器来查看时间花在哪里 在 Chrome 下 一旦应用程序被编译 即没有
  • CSS:如何在模糊的背景上剪切文本?

    我想重新创建以下样式 我想出了以下内容 问题是剪切不会影响模糊滤镜 我不知道如何解决它 这是我的 HTML 代码 glass width 40 height 100 position absolute background rgba 255
  • javascript/jquery 禁用点击提交按钮,防止重复提交

    所以我的提交按钮如下所示 a href img src images user create product png border 0 a 当我双击它时 显然会双重提交 问题是 我将信息保存在数据库中 因此那里会有重复的信息 我不想那样 这
  • 使用 Socket.IO 时如何访问会话标识符?

    我有一个聊天 我需要管理独特的连接 我四处搜寻 但我找到的解决方案似乎都已被弃用 那么 如何使用 Socket IO 获取套接字的会话 ID 我在用着Node js http en wikipedia org wiki Node js Ex
  • 当选项卡重新加载(chrome 扩展)时,如何运行此脚本?

    所以我想在指定 URL 中重新加载选项卡时运行脚本 它几乎可以工作 但实际上 id 不能 这是我的清单文件 manifest version 2 name Sample Extension description Sample Chrome
  • IE9-11 检测变换样式:preserve-3d

    我为一个项目制作了一个 3d 类型的菜单 自然 IE 会引起问题 因为 IE10 即使 3d 变换工作 也不支持变换样式 preserve 3d 我尝试了解决方法 通过对 3d 菜单容器的每个子元素应用变换 但至少可以说 动画看起来很糟糕
  • R闪亮:使用闪亮的JS从数据表中获取信息

    我想读出所有列名称以及它们在数据表中显示的顺序 由于不同的原因 我无法使用 stateSave 等选项 我对 JS 没有什么把握 但我确信用它可以完成 所以我需要你帮助我 我尝试过类似的代码片段 datatable data callbac

随机推荐

  • 分发预先经过 NGEN 处理的程序集是否有意义?

    我发现了一些关于使用 NGEN 作为安装程序的最后一步的有趣链接这个帖子 https stackoverflow com questions 522323 how do i run ngen at the end of the instal
  • 使用一个套接字创建 2 个流

    我正在尝试创建一个在互联网上运行的多人游戏 问题是我正在尝试获取流上的输入 但由于某种原因我无法使用一个套接字创建 2 个流 我将解释一下 Socket s new Socket 127 0 0 1 5001 ObjectInputStre
  • 如何将 csv 文件导入 MySQL Workbench?

    我有一个 CSV 文件 它包含 140 万行数据 因此我无法在 Excel 中打开该 csv 文件 因为它的限制约为 100 万行 因此 我想在MySQL Workbench中导入这个文件 此 csv 文件包含类似以下的列 Service
  • 如何找到图像中最密集的区域?

    考虑一个黑白图像 例如this http img13 imageshack us img13 7401 10416827 jpg 我想做的是找到白点最密集的区域 在这种情况下 有 20 21 个这样的密集区域 即 点簇构成一个密集区域 谁能
  • 以编程方式确定身份验证模式

    有没有办法以编程方式确定 SharePoint 2007 Web 应用程序是否正在使用表单身份验证 我想一种方法可能是从 web config 中读取它 但我想知道 API 中是否公开了一些属性 看看 admin Authenticatio
  • 尽早停止詹金斯管道作业

    在我们的 Jenkins Pipeline 工作中 我们有几个阶段 我想要的是 如果任何一个阶段失败 那么构建就会停止 而不是继续到进一步的阶段 以下是其中一个阶段的示例 stage Building def result sh retur
  • 核心数据单例管理器?

    有哪些技术原因不创建单例类来管理我的核心数据 我现在正在尝试做出决定 是否应该删除所有样板核心数据代码并在单例中重新实现它 Xcode 模板中的应用程序委托中的样板代码在功能上是作为单例实现的 应用程序对象是一个单例 它只维护一个委托对象
  • Office 2010 AddIn 开发 - 我可以从代码隐藏中读取用户正在使用的主题吗?

    PowerPoint 2010 提供三种默认主题 银色 黑色和蓝色 是否可以从代码隐藏中检查用户当前正在使用哪个主题 我使用此代码根据设置的主题设置界面的颜色 public static class LFTheme const int Th
  • .NET 任务实例在运行期间是否会超出范围?

    如果我在方法中有以下代码块 使用 NET 4 和任务并行库 var task new Task gt DoSomethingLongRunning task Start 并且该方法返回 该任务是否会超出范围并被垃圾收集 或者是否会运行完成
  • 具有私有基数的函数成员指针

    以下代码会产生编译时错误 base print 无法访问类中声明的私有成员 base der 不过我已经做了会员了public在派生类中 为什么这不起作用 include
  • MVC 4 - 编辑可变长度项目列表的更优雅方法?

    我发现的编辑可变长度项目列表的最佳建议是 2008 年为 ASP Net MVC 2 编写的 http blog stevensanderson com 2008 12 22 editing a variable length list o
  • 如何从html标签中只获取文本

    我查询了一些数据 结果是这样的 p img src xxx png alt br p p Lorem Ipsum is simply dummy text of the printing and typesetting industry L
  • 如何在 WooCommerce 中获取订单税务详细信息和税率?

    我正在尝试获取税率用于订单插件中的自定义变量 当然 我可以通过以下方式请求大量数据 order gt get 但我找不到获取税率的方法 例如 21 gt 21 有人有想法让这变得简单吗 你将会拥有获取订单税项这会给你一个数组WC Order
  • 循环遍历 XML 文档

    我的方法 if File Exists C config xml System Xml XmlDocument xd new System Xml XmlDocument xd Load C config xml System Xml Xm
  • 在 C# 中使用 PrintSpoolerAPI 函数 SetForm()

    我正在开发一个 Windows 窗体应用程序 我想在其中打印自定义文档 该自定义文档具有自定义尺寸 我必须使用 C 代码设置默认打印页面尺寸 我做了一些谷歌搜索并发现了PrintSpoolerAPI 我找到的代码将使用添加自定义表单 页面A
  • 使用空值上的连接级别使用 pl/sql 分割字符串

    我在 Oracle pl sql 中使用以下代码 版本 Oracle 数据库 11g 版本 11 2 0 1 0 select regexp substr A B C 1 level output from dual connect by
  • 仅为匿名用户缓存 ASP.NET 页面

    有没有一种简单的方法来仅为匿名用户缓存 ASP NET 整个页面 使用表单身份验证 上下文 我正在制作一个网站 其中向匿名用户显示的页面大多是完全静态的 但向登录用户显示的相同页面则不是 当然 我可以通过后面的代码手动完成此操作 但我认为可
  • LinkedHashMap 排序

    正如 LinkedHashMap 的 javadoc 中所指定的 如果将键重新插入到映射中 插入顺序不会受到影响 但在运行下面的程序时 我注意到在更改访问顺序时再次插入相同的键 Map
  • 开源和基于 Web 的 html5 文档查看器 [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 无论屏幕分辨率如何,如何使 javascript css 弹出 div 居中?

    我有以下代码 它在禁用背景的同时打开一个新的弹出窗口 问题是我必须将其定位 使其距顶部 100px 已经通过 CSS dialog 获得 并且位于屏幕中央 无论用户的分辨率是多少