資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 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://tutorialspoint.tw/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>
在上面的輸出中，當用戶單擊按鈕時，它將在左上角開啟彈出視窗。
將彈出視窗居中
我們已經瞭解了彈出視窗的基本知識。現在，我們將以這樣的方式設定屬性，以便使用者可以在螢幕中央看到彈出視窗。預設情況下，彈出視窗會出現在螢幕的左上角。
我們將為彈出視窗設定左和上位置，這將使其出現在中心。
語法
使用者可以按照以下語法使用window.open()方法，並在其中新增 left 和 top 屬性。
// set the horizontal center of the popup window the center of the screen. var left = ( screen.width– width_of_popup_window ) / 2; // set thevertical center of the popup window the center of the screen. 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://tutorialspoint.tw/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 將彈出視窗居中。這很簡單，我們只需要向 window.open() 方法新增 left 和 top 屬性即可。此外，我們還可以向 window.open() 方法新增許多其他屬性以使其更具功能。
10K+ 次瀏覽
