开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

启动弹出窗口后,如何将其移动到页面中心？

启动弹出窗口后,将其移动到页面中心，可以通过以下步骤实现：

首先，在HTML中添加弹出窗口的代码，通常使用<div>标签来创建一个容器，并使用CSS样式将其设置为弹出窗口。
接下来，在CSS中设置弹出窗口的样式，例如宽度、高度、背景颜色、字体大小和颜色等。
在JavaScript中编写代码来控制弹出窗口的移动。可以使用window.scrollTo()方法将页面滚动到弹出窗口的顶部，然后使用window.resizeTo()方法将弹出窗口调整到页面中心。
最后，在HTML中添加弹出窗口的关闭按钮，以便用户在关闭弹出窗口时不会出现问题。

以下是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
	<title>移动弹出窗口</title>
	<style>
		.popup {
			width: 300px;
			height: 200px;
			background-color: #fff;
			border: 1px solid #ccc;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -100px;
			margin-left: -150px;
			padding: 20px;
			text-align: center;
			box-shadow: 2px 2px 5px #ccc;
			overflow: auto;
		}
	</style>
	<script>
		function centerWindow() {
			var popup = document.getElementById('popup');
			window.scrollTo(0, document.body.scrollHeight);
			popup.style.top = (document.body.scrollHeight + 20) + 'px';
			popup.style.left = '50%';
			popup.style.marginLeft = '-250px';
		}
	</script>
</head>
<body>
	<div class="popup" id="popup">
		<h2>提示信息</h2>
		<p>感谢您使用本应用，您可以根据需要移动窗口。</p>
		<button onclick="window.close()">关闭</button>
	</div>
	<script>
		window.onload = function() {
			centerWindow();
		}
	</script>
</body>
</html>

在上述代码中，centerWindow()函数负责将弹出窗口移动到页面中心。该函数首先获取弹出窗口的ID，然后使用window.scrollTo()方法将页面滚动到弹出窗口的顶部。接下来，该函数使用window.resizeTo()方法将弹出窗口调整到页面中心，并设置其左侧和顶部距离页面中心的距离。最后，在弹出窗口关闭时，该函数再次调用centerWindow()函数，以确保弹出窗口始终位于页面中心。

相关搜索:如何修复页面中心的模型弹出窗口如何在setTimeout后在AMP页面显示弹出窗口如何在页面加载期间打开css弹出窗口，然后在页面加载完成时将其关闭如何使用WebDriver在页面加载完成后将鼠标悬停在页面内容上？页面在加载后滚动到中心如何在滚动后将图像放在顶部，并在页面向下滚动到页脚后将其滚动出视图？当一个元素是页面上的“最后一个元素”时，如何将它滚动到窗口中心如何禁止弹出窗口在我单击.popup-在第一次访问该页面时关闭后2天内显示在该页面上？list安卓理解JSON 流控硬件设备

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Windows 操作系统的安全设置

等到光标另起一行后，输入type 23.txt试探一下情况，此时就会出现拒绝访问的提示信息。另外把该文件移动到系统盘的根目录下，在一定程度上也可以防止木马对其的加载。　　...所以为此你最好在列表服务对话框内，双击messeng信使服务，在弹出的属性对话框内，将其信使服务的启动类型，选择为“已禁用”选项，就可将其服务关闭。　　...因此这里同样在服务“列表”对话框内，找到且双击clipbook服务名称，在弹出的“相关属性”对话框内，将启动项列表选择为已禁用，就可将其服务进行关闭。　　...这里同样在服务列表里，打开“Terminal services服务”的属性对话框，将其启动类型更改为“已禁用”状态后，单击“确定”按钮使其生效。...要想阻止其他网站所弹出的窗口，这里我们单击下面的“Internet选项”标签，在弹出的“Internet属性”对话框内，切入至上方“隐私”标签处，此时你会发现下面会多出一个弹出“窗口阻止”程序栏，然后我们单击其栏目里的

1.1K3 0

个人使用mac OS和win OS的差异

在打开 DMG 文件之前，需要先将它挂载为一个卷，并且在使用完成后需要将其弹出并卸载掉。...Option-调度中心：打开“调度中心”偏好设置。 Command-调度中心：显示桌面。 Control-下箭头：显示最前面的 App 的所有窗口。...按住 Command 键点按窗口标题：查看包含当前文件夹的文件夹。了解如何使用 Command 键或 Shift 键在“访达”中选择多个项目。...Control-P：上移一行。 Control-N：下移一行。 Control-O：在插入点后新插入一行。 Control-T：将插入点后面的字符与插入点前面的字符交换。...Option-Command-I：显示或隐藏检查器窗口。 Shift-Command-P：页面设置：显示用于选择文稿设置的窗口。

2.5K2 0

Windows快捷键速查

Ctrl + Shift + 箭头键当磁贴的焦点放在“开始”菜单上时，将其移到另一个磁贴即可创建一个文件夹。 Ctrl + 箭头键打开“开始”菜单后调整其大小。...使用搜索框在任何页面上键入搜索设置。 4. Windows 徽标键快捷键说明 Windows 徽标键打开或关闭“开始”菜单。 Windows 徽标键 + A 打开操作中心。...Windows 徽标键 + 数字打开桌面，然后启动固定到任务栏的应用 Windows 徽标键 + Shift + 数字打开桌面，然后启动固定到任务栏的应用新实例 Windows 徽标键 + Ctrl...Page Up 将光标向上移动一个页面。 Page Down 将光标向下移动一个页面。 Ctrl + Home（标记模式）将光标移动到缓冲区的起始处。...Ctrl + End（标记模式）将光标移动到缓冲区的结尾处。 Ctrl + 向上键在输出历史记录中上移一行。 Ctrl + 向下键在输出历史记录中下移一行。

4.2K2 0

MacBook Pro最全快捷键指南——高效型选手必备

Fn–左箭头 Home：滚动到文稿开头 Fn–右箭头 End：滚动到文稿末尾。 Command–上箭头将插入点移至文稿开头。 Command–下箭头将插入点移至文稿末尾。...Control-P 上移一行。 Control-N 下移一行。 Control-O 在插入点后插入一行。 Control-T 将插入点后面的字符与插入点前面的字符交换。...Option-Command-I 显示或隐藏检查器窗口。 Shift-Command-P 页面设置：显示用于选择文稿设置的窗口。 “访达”快捷键 Command-D 复制所选文件。...Command–Control–上箭头在新窗口中打开包含当前文件夹的文件夹。 Command–下箭头打开所选项。 Command–“调度中心” 显示桌面。...Option–“调度中心” 打开“调度中心”偏好设置。 Option–调高音量打开“声音”偏好设置。这个快捷键可与任一音量键搭配使用。按住 Command 键拖移将拖移的项目移到其他宗卷或位置。

6.3K4 0

H5页面前端开发常见的兼容性问题解决方法

例如下图，右图是正常页面，左边是IOS上下滑动后，卡顿导致如左图下面部分丢失。解决办法：只需要在公共样式加入下面这行代码。...IOS键盘唤起，键盘收起以后页面不归位问题描述：输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑。解决办法：在输入框失失去焦点的时候添加一个事件，让页面回滚。...安卓弹出的键盘遮盖文本框问题描述：安卓微信H5弹出软键盘后挡住input输入框，看不到输入的字符。如下左图是期待唤起键盘的时候样子，右边是实际唤起键的样子。...document.activeElement.scrollIntoView(); }, 500); } } Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内...Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域，但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。

2.8K1 0

在 Windows 11 上关闭弹出窗口最正确方法

这种新的请勿打扰允许您自定义如何在您的 PC 上抑制通知。...向下滚动到底部并取消选中“提供有关如何设置我的设备的建议”和“在我使用 Windows 时获取提示和建议”框。...现在重新启动您的 PC，您会发现系统上的所有通知都已禁用。不幸的是，同样的缺点是操作中心现在也在您的系统上被禁用。要访问这些设置，您可以使用桌面上的第三方小部件或从“设置”应用程序访问它们。...DisableNotificationCenter 双击相同并将其“值数据：”设置为 1。完成后单击“确定”。关闭注册表编辑器并重新启动您的 PC 以获得良好的效果。...重新启动后，通知和操作中心将在您的 PC 上被禁用。方法 7：直接从通知弹出窗口禁用应用程序的通知您可以使用当前通知本身禁用相关应用程序的通知。让我们来看看过程。

5311 0

Mac 键盘快捷键

要从“访达”窗口执行“聚焦”搜索，请按 Command–Option–空格键。（如果您使用多个输入源以便用不同的语言键入内容，这些快捷键会更改输入源而非显示“聚焦”。了解如何更改冲突的键盘快捷键。）...Option–“调度中心”：打开“调度中心”偏好设置。 Command–调度中心：显示桌面。 Control–下箭头：显示最前面的 App 的所有窗口。...按住 Command 键点按窗口标题：查看包含当前文件夹的文件夹。了解如何使用 Command 或 Shift 在“访达”中选择多个项目。...Control–P：上移一行。 Control–N：下移一行。 Control–O：在插入点后新插入一行。 Control–T：将插入点后面的字符与插入点前面的字符交换。...Option-Command-I：显示或隐藏检查器窗口。 Shift-Command-P：页面设置：显示用于选择文稿设置的窗口。 Shift-Command-S：显示“存储为”对话框或复制当前文稿。

2.7K2 0

mac全选文字的快捷键_MACBOOK最全快捷键指南

Fn-左箭头Home:滚动到文稿开头 Fn-右箭头End:滚动到文稿末尾 Command-上箭头将插入点移至文稿开头。...Contro|-P上移一行。 Contro|-N下移一行。 Control-O在插入点后插入一行。 Control-T将插入点后面的字符与插入点前面的字符交换 Command-左花括号()左对齐。...Option- Command-显示或隐藏检查器窗口。 Shift- Command-P页面设置:显示用于选择文稿设置的窗口。 “访达”快捷键 Command-D复制所选文件。...Command- Contro|上箭头在新窗口中打开包含当前文件夹的文件夹。 Command-下箭头打开所选项。 Command-“调度中心”显示桌面。即使您未在“访达”窗口中,这个快捷键也有效。...Option-“调度中心”打开“调度中心”偏好设置 Option-调高音量打开“声音”偏好设置。这个快捷键可与任一音量键搭配使用。按住 Command键拖移将拖移的项目移到其他宗卷或位置。

2.3K1 0

Windows 10内部的23个隐藏技巧

然后双击新图标以提示一个下拉阴影，并使用鼠标将其向下拖动到屏幕底部。请记住，这不是睡眠，这是关机。启用“上帝模式” ? 您是想要访问PC细节的高级用户吗？“上帝模式”适合您。...这是一个方便的菜单，可让您快速访问工具栏，Cortana和窗口方案的许多预设。那里有很多，只需点击一下即可。拖动到固定窗口 ?...抓住任何窗口并将其拖动到一侧，它将“适合”到屏幕的一半。在Windows 10中，您可以选择将窗口拖动到任何角落，以使窗口占据屏幕的四分之一而不是一半。...单击“任务视图”后，可以按Windows按钮+ Ctrl +右/左箭头在虚拟桌面之间切换。这样一来，您便可以在所有打开的窗口之间自动切换，而这些窗口已分为不同的桌面，而桌面上的所有图标均保持不变。...这些主题更改“开始”菜单，任务栏，操作中心，“文件资源管理器”，“设置”菜单以及与这些调色板更改兼容的任何其他程序的颜色。

4.3K3 0

Java学习笔记之Java环境配置

2、点击“高级系统设置”，在弹出的系统属性框中，选择“高级”选项卡（默认即显示该选项卡），点击“环境变量”。 3、在弹出的“环境变量”框，中选择下方的系统变量，点击新建。...4、在弹出的“新建系统变量”框中，输入变量名和变量值，点击确定。变量名为：JAVA_HOME 变量值为JDK的安装路径，到bin目录的上一层即可。...点击确定后，系统变量中会出现一条新的记录。 5、然后选中“系统变量”中的“Path”变量，点击“编辑”按钮，将刚才创建的JAVA_HOME变量添加到“Path”变量中。...在弹出的“编辑系统变量”框中，点击“新建”，输入%JAVA_HOME%\bin。输入完毕，点击“上移”按钮，将该值移动到第一行。点击确定。...6、至此，java环境变量配置完毕，打开命令行窗口，验证配置是否成功。如果之前已经打开命令行窗口，需要关闭重新启动才可。在非JDK安装的bin目录下，输入java或者javac命令，查看效果。

3713 0

Windows10中的键盘快捷方式

）删除所选的项目，将其移至回收站 Ctrl + R（或 F5）刷新活动窗口 Ctrl + Y 恢复操作 Ctrl + 向右键将光标移动到下一个字词的起始处 Ctrl + 向左键将光标移动到上一个字词的起始处...+ 箭头键当组或磁贴的焦点放在“开始”菜单上时，可将其朝指定方向移动 Ctrl + Shift + 箭头键当磁贴的焦点放在“开始”菜单上时，将其移到另一个磁贴即可创建一个文件夹 Ctrl + 箭头键...打开“开始”菜单后调整其大小 Ctrl + 箭头键（移至某个项目）+ 空格键选择窗口中或桌面上的多个单独项目 Ctrl + Shift（及箭头键）选择文本块 Ctrl + Esc 打开“开始”屏幕...Windows 徽标键 + Shift + 数字打开桌面，然后启动固定到任务栏的应用新实例（位于数字所指明的位置）Windows 徽标键 + Ctrl + 数字打开桌面，然后切换至固定到任务栏的应用的最后活动窗口...Page down 将光标向下移动一个页面 Ctrl + Home（标记模式）将光标移动到缓冲区起始处 Ctrl + End（标记模式）将光标移动到缓冲区结尾处 Ctrl + 向上键在输出历史记录中上移一行

4.5K2 0

Protel99SE快捷键大全

protel99se快捷键 enter——选取或启动 esc——放弃或取消 f1——启动在线帮助窗口 tab——启动浮动图件的属性窗口 pgup——放大窗口显示比例 pgdn——缩小窗口显示比例...alt+f4——关闭prote spacebar——绘制导线，直线或总线时，改变走线模式 v+d——缩放视图，以显示整张电路图 v+f——缩放视图，以显示所有电路部件 home——以光标位置为中心...+左箭头——光标左移10个电气栅格右箭头——光标右移1个电气栅格 shift+右箭头——光标右移10个电气栅格上箭头——光标上移1个电气栅格 shift+上箭头——光标上移10个电气栅格...，水平居中排列 ctrl+v——将选定对象以上下边缘的中心线为基准，垂直居中排列 ctrl+shift+h——将选定对象在左右边缘之间，水平均布 ctrl+shift+v——将选定对象在上下边缘之间...，垂直均布 f3——查找下一个匹配字符 shift+f4——将打开的所有文档窗口平铺显示 shift+f5——将打开的所有文档窗口层叠显示 shift+单左鼠——选定单个对象 crtl+单左鼠

1.7K2 0

劫持Chrome浏览器的“新方法”

这时候，诈骗分子就可以在网页顶部加载一个JPEG格式的图片，并将其外观设计成与Chrome的工具栏一模一样。当用户将他们的鼠标移动到页面顶部的区域时，他们并不会发现任何的异常。...当浏览器加载了这个诈骗页面之后，浏览器便会自动进入全屏模式。这一切操作完成之后，该页面还会通过不断弹出警告窗口的形式来防止用户关闭该网页。...现在，让我们来深入分析一下，这种伪造页面到底是如何实现的。...Chrome浏览器有一个非常有意思的功能，它提供了一个“阻止该页面弹出额外窗口”的选项，这个功能非常的有用。因为很多网站在用户关闭网页的时候，会弹出一些类似“您确定要离开这个页面吗？”...在另一种攻击场景中，诈骗分子可以模仿Chrome原始的警告弹窗风格来伪造出一个弹出窗口。Chrome浏览器会询问用户是否需要禁用该页面的弹窗功能，此时就是这个伪造弹窗发挥作用的时候了。

1.7K6 0

Axure交互大全：Axure全交互模板及视频教程

1.1.3 弹出窗口这个交互和上一个交互的不同处在于该交互会以弹出的形式打开某个页面，我们可以同时看到两个页面的内容，弹出窗口的基本属性（大小、工具栏、共东条等）可以设置。...1.1.4 父极窗口父级窗口对应弹出窗口，就是在弹窗窗口中可以设置原来窗口的页面。这个交互一般和关闭页面一起用，例如点击了弹窗中的广告，先可以设置原来的页面跳转至产品页面，再关闭弹出窗口。...1.4 滚动到元件该交互能让页面滚动到指定的元件，在长页面中比较常见，例如内容分享平台，功能介绍，用户分析、可视化视图等。1.5设置自适应视图如果设置了多个分辨率的视图，该事件可以选择视图。...弹出效果，显示后，如果鼠标离开该区域，隐藏显示内容，常用语顶部菜单或下拉列表推动元件，显示后，推动右侧或下方的元件，适用于根据不同选项显示不同内容的页面2.1.2 隐藏隐藏是和显示相对应的，主要用于弹窗选择...5.2 其他其他这个交互，可以设置在弹出窗口显示的文字，暂时未发现该交互有什么特别的作用，因为只能输入文字，且不能用函数，弹出窗口没有交互，所以作者也很少用这个交互。

1713 0

加点JavaScript魔法

使用“悬停”模式时，只要你将鼠标指针放在目标元素中，弹出窗口就会保持可见状态。当你移开鼠标时，弹出窗口将消失。这具有糟糕的副作用，即如果用户想要将鼠标指针移动到弹出窗口中，弹出窗口将消失。...我需要找出一种方法来将悬停行为扩展为包含弹出窗口，以便用户可以移动到弹出窗口中，例如，单击那里的链接。在开发基于浏览器的应用程序时，事情变得越来越复杂的情况，实际上并不罕见。...你必须非常仔细地考虑DOM元素如何相互作用，并使其行为方式提供良好的用户体验。 03 在页面加载完成后执行函数很明显，我将需要在每个页面加载后立即运行一些JavaScript代码。...正如我上面提到的，这会影响悬停事件的行为，只要用户将鼠标从链接移动到弹出窗口本身，就会触发“鼠标移出”事件。...如果用户将鼠标指针移动到其中一个用户链接中，并在移动它之前停留了半秒钟，我不希望该timer继续运行并调用显示弹出窗口的函数。

3.9K1 0

JavaSE | 每日笔记

(2)点击“高级系统设置”，在弹出的系统属性框中，选择“高级”选项卡（默认即显示该选项卡），点击“环境变量”。 (3)在弹出的“环境变量”框，中选择下方的系统变量，点击新建。...(4)在弹出的“新建系统变量”框中，输入变量名和变量值，点击确定。变量名为：JAVA_HOME 变量值为JDK的安装路径，到bin目录的上一层即可。...(5)点击确定后，系统变量中会出现一条新的记录。...(7)在弹出的“编辑系统变量”框中，点击“新建”，输入%JAVA_HOME%\bin。 (8)输入完毕，点击“上移”按钮，将该值移动到第一行。点击确定。...(9)至此，java环境变量配置完毕，打开命令行窗口，验证配置是否成功。如果之前已经打开命令行窗口，需要关闭重新启动才可。在非JDK安装的bin目录下，输入java或者javac命令，查看效果。

5992 0

微信 H5 页面兼容性解决方案

、页面缺失问题详情描述：在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况，例如下图，右图是正常页面，边是ios上下滑动后，卡顿导致如左图下面部分丢失...3、ios键盘唤起，键盘收起以后页面不归位问题详情描述：输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑出现原因分析：固定定位的元素在元素内 input 框聚焦的时候弹出的软键盘占位...问题详情描述：安卓微信H5弹出软键盘后挡住input输入框，如下左图是期待唤起键盘的时候样子，右边是实际唤起键盘的样子 ?...document.activeElement.scrollIntoView(); }, 500); } } 拓展知识： Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内...而Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。

3.3K3 0

【H5】344- 微信 H5 页面兼容性解决方案

、页面缺失问题详情描述：在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况，例如下图，右图是正常页面，边是ios上下滑动后，卡顿导致如左图下面部分丢失...3、ios键盘唤起，键盘收起以后页面不归位问题详情描述：输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑出现原因分析：固定定位的元素在元素内 input 框聚焦的时候...问题详情描述：安卓微信H5弹出软键盘后挡住input输入框，如下左图是期待唤起键盘的时候样子，右边是实际唤起键盘的样子 ?...document.activeElement.scrollIntoView(); }, 500); } } 拓展知识： Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内...而Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。

2.7K3 0

微信H5页面兼容性解决方案

、页面缺失问题详情描述：在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况，例如下图，右图是正常页面，左边是ios上下滑动后，卡顿导致如左图下面部分丢失...3、ios键盘唤起，键盘收起以后页面不归位问题详情描述：输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑出现原因分析：固定定位的元素在元素内 input 框聚焦的时候...问题详情描述：安卓微信H5弹出软键盘后挡住input输入框，如下左图是期待唤起键盘的时候样子，右边是实际唤起键盘的样子 ?...document.activeElement.scrollIntoView(); }, 500); }} 拓展知识： Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内...而Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。

3.4K4 3

iOS微信浏览器input聚焦导致页面上移，不能恢复的解决方法

H5页面在iOS系统微信浏览器中，input focus 聚焦时页面会被上推，导致页面整体上移。...blur 失焦后不能恢复，再次点击 input 时没反应，不能聚焦，无法输入内容，这时候需要滑动一下页面才能恢复正常。...最后发现是因为 iOS 中 input 聚焦时会导致页面上移，失焦后页面不能恢复，但是 input 会恢复之前的位置（或者说下移）。...解决办法：比较简单的思路， input 失焦时，页面滚动到顶部（以 jQuery 为例）： $('input').on('blur',function(){ window.scroll(0,0...document.getElementById('#input').addEventListener('blur', function () { window.scrollTo(0, 0) //页面滚动到顶部

3.3K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭