如何使用 JavaScript 将弹出窗口置于屏幕中央?
在本教程中，我们将学习使用 JavaScript 将弹出窗口置于屏幕中央。程序员经常需要打开一个新的弹出窗口来显示另一个网页，而无需将用户重定向到另一个网页。在这种情况下，开发人员使用 window.open() 方法打开新的浏览器窗口。
此外，我们可以设置弹出窗口的样式并设置高度和宽度。此外，我们可以更改弹出窗口的位置以使其看起来更好。
示例弹出窗口
在本节中，我们将创建一个示例弹出窗口以熟悉 window.open() 方法的工作原理。此外，我们将学习设置 window.open() 方法的属性以使其更好。
语法
用户可以按照以下语法使用 window.open() 方法。
newWindow = window.open(url, 'popUpWindow', 'height=' + height + ', width=' + width + ', resizable=yes, scrollbars=yes, Toolbar=yes');
参数
URL − 这是将在浏览器的弹出窗口中打开的网页的 URL。
height − 设置弹出窗口的高度。
width − 设置弹出窗口的宽度。
resizable − 允许调整弹出窗口的大小。
scrollbars − 如果窗口内的内容大于窗口大小，则在弹出窗口内显示滚动条。
示例
在下面的示例中，我们创建了按钮。当用户点击按钮时，它将调用一个名为 openPopUp() 的函数。在 openPopUp() 函数中，我们实现了 window.open() 方法，该方法在新窗口中打开 TutorialsPoint 站点的主页。
<html> <head> </head> <body> <h2> Center the popup window using the JavaScript. </h2> <h4> Click the button to open popup window at top left corner. </h4> <button style=" height : 30px; width: 200px; " onclick = "openPopUp()"> click to open popup </button> <script> // function to open the popup window function openPopUp() { let url = "https://www.tutorialspoint.com/index.htm"; let height = 600; let width = 1200; newWindow = window.open( url, 'popUpWindow', 'height=' + height + ', width=' + width + ', resizable=yes,scrollbars=yes,toolbar=yes' ); } </script> </body> </html>
在上面的输出中，当用户点击按钮时，它将在左上角打开弹出窗口。
将弹出窗口居中
我们已经了解了弹出窗口的基本知识。现在，我们将设置属性，以便用户可以在屏幕的中心看到弹出窗口。默认情况下，弹出窗口出现在屏幕的左上角。
我们将设置弹出窗口的左侧和顶部位置，使其出现在中心。
语法
用户可以按照以下语法将 left 和 top 属性添加到 window.open() 方法中。
// 将弹出窗口的水平中心设置为屏幕的中心。 var left = ( screen.width– width_of_popup_window ) / 2; // 将弹出窗口的垂直中心设置为屏幕的中心。 var top = ( screen.height -height_of_popup_window ) / 2; var newWindow = window.open( url, "center window", 'resizable=yes, width=' + width + ', height=' + height + ', top=' + top + ', left=' + left);
参数
在上述方法中，我们添加了两个新参数
Left - 设置窗口的起始左侧位置。
Top - 设置弹出窗口的起始顶部位置。
Screen.width - 返回以像素为单位的屏幕宽度。
Screen.height - 返回以像素为单位的屏幕高度。
示例
在下面的示例中，我们向 window.open() 方法添加了 left 和 top 属性，并提供了适当的值以使弹出窗口居中。
<html> <head> </head> <body> <h2> Center the popup window using the JavaScript. </h2> <h4> Click the button to open popup window at center. </h4> <button style = " height:30px; width:200px; " onclick = "openPopUp()"> click to open popup </button> <script> // function to open the popup window function openPopUp() { let url = "https://www.tutorialspoint.com/index.htm"; let height = 300; let width = 700; var left = ( screen.width - width ) / 2; var top = ( screen.height - height ) / 2; var newWindow = window.open( url, "center window", 'resizable = yes, width=' + width + ', height=' + height + ', top='+ top + ', left=' + left); } </script> </body> </html>
当用户点击按钮打开弹出窗口时，它将出现在设备屏幕的中间。
我们已经学会了仅使用 JavaScript 将弹出窗口居中。这很简单，只需将 left 和 top 属性添加到 window.open() 方法即可。此外，我们还可以向 window.open() 方法添加许多其他属性，使其更具功能性。
