无论屏幕分辨率如何,如何使 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 居中? 的相关文章

  • JavaScript 数组 every 和 some 之间的区别

    我看到在给定的测试中两者都返回 true 或 false https developer mozilla org en US docs Web JavaScript Reference Global Objects Array some h
  • 与 font-weight:bold 和 与 font-style:italic

    使用之间有什么真正的区别吗 strong and em 而不是 CSS 属性 font weight bold font style italic 另外 这两种选择都存在的真正原因是什么 我可能是错的 但我没有 strong and em
  • 当函数定义为无参数时,为什么我可以调用带参数的函数?

    再会 我偶然发现了一些我在 JavaScript 领域从未见过的东西 但我想对于更了解该语言的人来说这是很容易解释的 下面我有以下函数 代码取自书籍 JavaScript Ninja 的秘密 function log try console
  • React Native Tab 视图的高度始终等于最高选项卡的高度

    介绍 我有一个 FlatList 它在页脚中呈现一个选项卡视图 此选项卡视图允许用户在一个 FlatList 或另一个 FlatList 之间切换 所以 最后这些是同级 FlatList Problem 第一个 FlatList A 的高度
  • NodeJS 中的 uglify-js“找不到模块”

    在这里我正在创建应用程序来压缩 javascript 文件 我所做的步骤 在我的本地机器上安装了nodeJS 检查节点和 npm 正在工作 通过 npm install uglify js g 安装 uglify js 并安装 当我尝试在命
  • 没有 ssl 的 Web 加密 API

    我编写了一个用于安全消息传输的小网络应用程序 以了解有关加密的更多信息 并想向我的朋友展示它并让他们玩一下 所以我将它托管在我的小服务器上 并惊讶地发现 Web Crypto API 我竭尽全力开始工作 因为它的错误消息不是很具体 需要 S
  • 在TestCafé测试中注入的injectScripts中的脚本在哪里?

    我正在以编程方式设置 TestCaf 测试 并且使用injectScripts配置上Runner类来注入函数 根据文档 这些脚本被添加到测试页面的标题中 是否可以从测试本身调用函数 我还没有找到办法做到这一点 我可以看到脚本映射在测试中是可
  • Facebook 分享不显示来自开放图元标签的图像

    我正在尝试将 Facebook 共享按钮集成到我雇主的网站 标题 网址 描述 简介均显示正确 但未附加任何图像 当共享对话框打开时 图像容器会闪烁 然后消失 就好像 facebook 正在尝试处理图像但失败一样 我正在使用 og image
  • div 元素中的文本在 Firefox 中位于水平对齐的 span 元素之上

    我正在编写一个 Web 应用程序 其中支持票证显示为左侧的票证 ID 作为静态文本 其余字段 描述 严重性 持续时间 状态 报告者 在右侧显示为固定文本中的滚动文本 大小视口 我从一个 span 包含票证 ID 和视口 div 包含第二个
  • 有没有带有保存和语法突出显示功能的 HTML、CSS 在线文本编辑器?

    我想让 css 文件可以从任何地方 家庭 办公室等 访问并准备好编辑 并保存 我将进行手工编码 只想语法突出显示并保存在网络设施上 我尝试了谷歌文档 这很好 因为我可以在线保存 而且它也有修订历史记录功能 这很有用 但它没有语法突出显示 也
  • IE 11 的 Map(iterable) 替代方案

    不幸的是我必须支持IE11 我使用以下代码创建地图 已使用 entries 的 polyfill const map new Map Object entries array 但由于IE11不支持iterable构造函数中Map 是空的 我
  • Chrome 打包应用程序 - 在后台/事件页面中使用 AngularJS

    当我们创建 Chrome 应用程序时 我们将脚本放在背景属性中清单 json file 这将用作应用程序的背景 事件页面 我想要的是 我想使用 AngularJS后台脚本但我不知道怎么办 还有 这可能吗 我刚看到一些答案 https sta
  • 无法解构“undefined”或“null”的属性“user”

    使用 redux 检索用户信息时出错 我想从数据库获取用户信息 姓名 密码和头像地址 然后对其进行编辑 我正在使用nodejs express react redux 和jwt Actions user js import axios fr
  • 如何在javascript中解压二进制文件?

    我正在尝试将一些现有代码从 python 移植到 javascript 并且不确定如何处理以下行 var1 var2 struct unpack
  • 高度在 IOS (iphone) 上无法正常工作

    我已经创建了this https codepen io salman15 project live DWbWpo Codepen 上的网站 在尝试使其响应所有平台时 我遇到了问题 看起来单个 div 覆盖了整个页面 仅在 IOS 上 并且并
  • 将复杂对象传递给 ui-sref 参数

    我需要这样的构建网址 列表 过滤器 状态 1 过滤器 类型 2 I do link a List a 在参数中传递复杂对象 如果传递简单对象 filter 1 可以 但我需要这个 state state list url list filt
  • Mongoose - 遍历对象

    在 node js 上使用 mongoose 我试图找到玩家 game players id 等于我传递的 id 的所有游戏 Schema var Game mongoose Schema id String date type Date
  • 使用 javascript 将子元素添加到父元素

    我正在尝试添加一个子元素 to a 父元素如下 li要添加到ul 单击 Enter 按钮或按下键盘上的 Enter 键时 会生成一个新的li and delete按钮应该添加到ul 我的代码无法正常工作 有人可以帮我解决这个问题吗 HTML
  • 当页面加载图像时,它是只加载一次,还是每次在标记中找到它时加载?

    当页面加载图像时 它是只加载一次 还是每次在标记中找到它时加载 那么 jquery 呢 附加一个 img 会导致它再次重新加载吗 我问这个问题是因为我有高分辨率图像 但需要在标记的许多情况下使用它 img src hello jpg img
  • 高图表的分散工具提示未显示

    我有一个散点图和条形图 我无法查看酒吧上方散点的工具提示 这是小提琴http jsfiddle net tZ9Rt http jsfiddle net tZ9Rt 我正在使用这两个系列 series type scatter index 2

随机推荐

  • 分发预先经过 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 获得 并且位于屏幕中央 无论用户的分辨率是多少
Powered by Hwhale