如何使用 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，將在瀏覽器的彈出視窗中開啟。

  • 高度 − 它設定彈出視窗的高度。

  • 寬度 − 它設定彈出視窗的寬度。

  • 可調整大小 − 它允許調整彈出視窗的大小。

  • 捲軸 − 如果視窗內的內容大於視窗大小，它將在彈出視窗內顯示捲軸。

示例

在下面的示例中，我們建立了一個按鈕。當用戶單擊按鈕時，它將呼叫名為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()方法，將左側和頂部屬性新增到其中。

// 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);

引數

在上述方法中，我們添加了兩個新引數

  • 左側 − 它設定視窗的起始左側位置。

  • 頂部 − 它設定彈出視窗的起始頂部位置。

  • Screen.width − 它以畫素為單位返回螢幕寬度。

  • Screen.height − 它以畫素為單位返回螢幕高度。

示例

在下面的示例中，我們向 window.open() 方法添加了左側和頂部屬性，並提供適當的值以使彈出視窗居中。

<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() 方法新增左側和頂部屬性即可。此外，我們還可以向 window.open() 方法新增許多其他屬性以使其更具功能性。

更新於：2022年8月2日

10K+ 次瀏覽

啟動你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.