在屏幕上居中弹出窗口?

2023-12-22

我们怎样才能将通过 JavaScript 打开的弹出窗口居中window.open屏幕中央的功能(确切的x and y哪个坐标取决于当前屏幕分辨率)?


单/双显示器功能(归功于http://www.xtf.dk http://www.xtf.dk- 谢谢你!)

更新:由于@Frost,它也适用于现在未达到屏幕宽度和高度的最大窗口!

如果您使用双显示器,窗口将水平居中,但不会垂直居中...使用此功能来解决这一问题。

const popupCenter = ({url, title, w, h}) => {
    // Fixes dual-screen position                             Most browsers      Firefox
    const dualScreenLeft = window.screenLeft !==  undefined ? window.screenLeft : window.screenX;
    const dualScreenTop = window.screenTop !==  undefined   ? window.screenTop  : window.screenY;

    const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
    const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

    const systemZoom = width / window.screen.availWidth;
    const left = (width - w) / 2 / systemZoom + dualScreenLeft
    const top = (height - h) / 2 / systemZoom + dualScreenTop
    const newWindow = window.open(url, title, 
      `
      scrollbars=yes,
      width=${w / systemZoom}, 
      height=${h / systemZoom}, 
      top=${top}, 
      left=${left}
      `
    )

    if (window.focus) newWindow.focus();
}

使用示例:

popupCenter({url: 'http://www.xtf.dk', title: 'xtf', w: 900, h: 500});  

信用归:http://www.xtf.dk/2011/08/center-new-popup-window-even-on.html http://www.xtf.dk/2011/08/center-new-popup-window-even-on.html(我只想链接到此页面,但以防万一此网站出现故障,代码位于此处。)

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

在屏幕上居中弹出窗口? 的相关文章

  • ReferenceError:regeneratorRuntime未定义(但在范围内工作)

    我遇到过这种奇怪的情况 ReferenceError regeneratorRuntime is not defined 我已经设法在一个非常小的设置中重现 与同一问题上的类似问题相比 并且还注意到一些奇怪的行为 具体取决于是否使用范围 以
  • 将鼠标悬停时的鼠标光标更改为锚状样式

    如果我将鼠标悬停在div鼠标光标将更改为 HTML 锚点中的光标 我怎样才能做到这一点 假设你的div has an id myDiv 将以下内容添加到您的 CSS 中 这cursor pointer指定光标应与用于锚点 超链接 的手形图标
  • 为什么 iife 在一个简单的例子中不起作用?

    我不明白为什么函数表达式调用不起作用并抛出错误 你能给我解释一下吗 var a function x alert x function a 1 谢谢大家 任务比我想象的要容易得多 这是因为 JS 将 IIFE 解析为函数的参数调用 这样做时
  • 如何在react-bootstrap中禁用表单提交的

    在下面的代码片段中 我有许多文本类型的输入表单 如果用户点击 我似乎会得到相同的合成事件 就像他们按下提交按钮一样 我想忽略作为表单提交 只允许一个人按下 提交 按钮 我删除了一些表单组以减少示例 在所有情况下 按钮或 ENTER 键 e
  • Chrome 中的性能问题

    我目前正在从事一个相对较大的项目 使用 AngularJs 构建 应用程序的一部分是一个表单 您可以向其中添加任意数量的页面 不幸的是 添加了很多不必要的垃圾 即表示表单模型的对象可能会变得非常大 在某些时候 Chrome 基本上无法处理它
  • 如何将内联 JavaScript 与 Express/Node.js 中动态生成的内容分开?

    对于具有几年 Web 开发经验但没有找到答案的人来说 这是一个有点菜鸟的问题程序员堆栈交换 or Google 我决定在这里问一下 我在用Express网络框架Node js 但这个问题并不特定于任何 Web 框架或编程语言 以下是从数据库
  • 如何针对 Node.js 中发生的每个错误发送电子邮件?

    假设我的 node js 应用程序正在运行 如果出现错误 我的意思是所有错误 不仅仅是网络错误 如果出现错误 则很重要 我如何调用函数向我发送电子邮件 基本上 在我希望它写入 err out 之前 我希望向我发送一封电子邮件 我正在使用no
  • 引导程序提前输入未填充承诺的响应

    我的引导程序预输入如下
  • 防止 iOS 键盘在 cordova 3.5 中滚动页面

    我正在使用 Cordova 3 5 和 jQuery mobile 构建 iOS 应用程序 我在大部分应用程序中禁用了滚动功能 但是 当我选择输入字段时 iOS 键盘会打开并向上滚动页面 我不想要这个功能 由于输入足够高 键盘不会覆盖它 我
  • 如何制作没有 ng-repeat 的模板并使用 Angular-drag-and-drop-lists 将数据传递到 $scope?

    我想用角度拖放列表 https github com marceljuenemann angular drag and drop lists使用我自己的网格模板到所见即所得编辑器 如何构建我自己的 HTML 模板而不需要ng repeat因
  • window.location 和 location.href 之间的区别

    我对之间的区别感到困惑window location and location href 两者似乎都以相同的方式行事 有什么不同 window location是一个对象 它保存有关当前文档位置的所有信息 主机 href 端口 协议等 lo
  • 有没有办法在 onclick 触发时禁用 iPad/iPhone 上的闪烁/闪烁?

    所以我有一个有 onclick 事件的区域 在常规浏览器上单击时 它不会显示任何视觉变化 但在 iPad iPhone 上单击时 它会闪烁 闪烁 有什么办法可以阻止它在 iPad iPhone 上执行此操作吗 这是一个与我正在做的类似的示例
  • Firebase 函数 onWrite 未被调用

    我正在尝试使用 Firebase 函数实现一个触发器 该触发器会复制数据库中的一些数据 我想观看所有添加的内容votes user vote 结构为 我尝试的代码是 const functions require firebase func
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • Three.js 各种大小的粒子

    我是 Three js 的新手 正在尝试找出添加 1000 个粒子的最佳方法 每个粒子都有不同的大小和颜色 每个粒子的纹理是通过绘制画布创建的 通过使用粒子系统 所有粒子都具有相同的颜色和大小 为每个粒子创建一个粒子系统是非常低效的 有没有
  • 使用 Vue 的多模式组件

    我在 Vue 中实现动态模式组件时遇到问题 A common approach I follow to display a set of data fetched from the db is I dump each of the rows
  • Javascript - 水波纹效果

    我需要 JS 上的脚本 它将以 水波纹 样式更改 images html 抱歉 6MB GIF 文件 http fcuunited ru temp listening2 gif http fcunited ru temp listening
  • 在 CKEditor 中设置字体大小和字体系列

    我正在使用 ckeditor 我想问一下这个插件如何设置font family和font size 我尝试过使用 CKEDITOR config font defaultLabel Arial CKEDITOR config fontSiz
  • JavaScript 相对路径

    在第一个 html 文件中 我使用了一个变量类别链接 var categoryLinks Career prospects http localhost Landa DirectManagers 511 HelenaChechik Dim0
  • 如何使用asm.js进行测试和开发?

    最近我读到asm js规范 看起来很酷 但是是否有任何环境 工具来开发和测试这个工具 这还只是处于规范阶段吗 您可以尝试使用 emscripten 和 ASM JS 1 并从侧分支在 firefox 构建中运行它 有关 asm js 的链接

随机推荐

  • 每个人工创建的代码文件的开头是否都有文件头注释?

    我正在经历一体化代码框架 http 1code codeplex com 编码标准文档和建议之一是在每个人工创建的代码文件的开头添加文件头注释 这是我第一次看到这样的建议 对我来说这只是一个不必要且丑陋的混乱 但我想知道是否有人可以解释为什
  • HTC WildFire 上的 SharedPreferences EditText 对话框被挤压

    我在我的 Android 应用程序中以标准方式使用 SharedPreferences 在 HTC WildFire 设备 分辨率 240x320 上 显示虚拟键盘时 EditText 会被挤压 有没有其他人遇到过这个 有解决办法吗 我已经
  • 验证日期序列的顺序是否正确

    我有一个包含 4 列日期的数据框 应该是 col1 首先出现 col2 其次出现 col3 第三出现 col4 最后出现 我想确定哪些行的日期不按顺序排列 这是一个玩具数据框 col1 lt c as Date 2004 1 1 as Da
  • 如何仅导入存在的模块?

    我正在做 降临代码 这是 25 个编程问题的集合 每一天对应一个 我在自己单独的文件 模块中构造每一天 因此例如 2021 年第 7 天将位于src years year2021 day07 rs So src years year2021
  • AngularJS - 如何向服务器上的控制器提交表单?

    食谱表格示例AngularJS 网站 http www AngularJS org只在客户端保存状态 如何提交到服务器 或者 我如何使用 jQueryform submit 在表格中的ng click save 功能 编辑 找到了 2 种方
  • 比较循环数组中的元素(java)

    我正在尝试制定一个 for 循环 该循环将采用一个数组 例如 5 个元素 并且允许我处理a 0 仿佛是在之后a 4 and a 4 就像以前一样a 0 我无法更改数组 并且它在每个元素中存储一个线程 因此我宁愿使其尽可能简单 以免损坏线程的
  • Qt 以最佳质量调整图像大小

    任何人都可以帮助我在 qt 中调整图像大小而不使图像像素化 这是我的代码 结果不如原来的质量 谢谢 QImage img name QPixmap pixmap pixmap pixmap fromImage img scaled widt
  • 用于游戏编程的 C++ - 爱还是不信任? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 以游戏编程效率的名义 一些程序员不信任某些 C 功能 我的一位朋友自称了解游戏行业的运作方式 并会提出以下评论 不要使用智能指针 游戏中没有人这
  • 我需要手动释放CFStringRef吗?

    您能告诉我在非 ARC 世界中哪种方法是正确的以及为什么吗 NSString getUUID CFUUIDRef theUUID CFUUIDCreate NULL CFStringRef string CFUUIDCreateString
  • 如何以及何时为 graphql 生成 ID?

    我正在将 graphql 与 SQLite 数据库连接 在 sql 中 id 是整数 但在 graphql 中 id 是字符串 经过搜索 基于这个问题 何时使用 GraphQLID 而不是 GraphQLint https stackove
  • BigQuery 表数据导出

    我正在尝试从中导出数据BigQuery使用 python api 的表 表包含 1 到 4 百万行 所以我一直保留着maxResults参数最大 即 100000 然后分页 但问题是 在一页中我只获得 2652 行 因此分页数量太多 谁能提
  • 如何从文件夹中删除 SVN [重复]

    这个问题在这里已经有答案了 可能的重复 如何删除文件夹的 Subversion 控制 https stackoverflow com questions 154853 how do you remove subversion control
  • response.setContentType() 总是修剪“; charset”之间的空格?

    我正在使用 Tomcat 6 0 20 HttpServlet 我的 servlet 代码如下 response setContentType application xml charset utf 8 但每次我都会得到内容类型为 appl
  • 文件上传对话框第一次不显示onclick

    一旦用户点击不透明图像的一部分 我们正在显示文件上传对话框 我们有 2 个彼此重叠的图像 如下所示 Issue 在上面的两张图片中 无论我点击非传输部分 都会显示文件上传对话框 但是如果我们点击重叠部分 而不是不显示 但是如果我们单击重叠部
  • 获取 PHP 中调用函数的名称?

    是否有 PHP 函数可以找出给定函数中调用者函数的名称 See 调试回溯 http php net manual en function debug backtrace php 这可以跟踪您的调用堆栈一直到顶部 以下是接听来电者的方法 tr
  • 导入错误没有名为 zlib 的模块(brew 安装了 python)

    当我在 python 2 7 的brew 安装版本上使用 pip freeze 时 出现导入错误 没有名为 zlib 的模块 pip freeze Traceback most recent call last File usr local
  • 如何找到哪个事务导致“等待表元数据锁定”状态?

    我正在尝试在表上执行一些 DDLSHOW PROCESSLIST导致 等待表元数据锁定 消息 我怎样才能知道哪笔交易尚未结束 我正在使用 MySQL v5 5 24 适用于 MySql 版本 SHOW ENGINE INNODB STATU
  • 我似乎无法在 html5 canvas 上画线

    我正在使用 HTML5 来绘制一条线 但当画布的宽度和高度较大时 它在 chrome 中无法正常工作 我使用的是 chrome 19 0 1084 52 我的操作系统是 windows 7 有谁用过吗http www w3schools c
  • sqlalchemy 中的多个/分割类关联

    我定义了以下对象和关系 这实际上是一个非常简单的案例 我提供所有这些字段只是为了说明为什么我认为吸入麻醉和注射麻醉应该由两个不同的类别定义 class InhalationAnesthesia Base tablename inhalati
  • 在屏幕上居中弹出窗口?

    我们怎样才能将通过 JavaScript 打开的弹出窗口居中window open屏幕中央的功能 确切的x and y哪个坐标取决于当前屏幕分辨率 单 双显示器功能 归功于http www xtf dk http www xtf dk 谢谢