如何在 JavaScript 警示框中顯示超連結？

我們使用 **jQuery UI** 的 **dialog API** 在 JavaScript 警示框中顯示超連結。**JavaScript** 不允許在警示框中放置可點選的超連結。純 JavaScript 提供的最接近的功能是使用 **window.confirm()** 方法的 **確認框**。

我們將使用 **jQuery** 庫在 JavaScript 警示框中顯示超連結。它是一個用於 JavaScript 的庫，用於 **遍歷** HTML 文件以及 **操作** 它們，建立 **動畫** 等等。其中一項功能就是我們將要使用的 **自定義對話方塊**。

**警示框** 是向用戶顯示需要立即注意的訊息。**警示框** 通常顯示某種警告，因此它有意不適合顯示可點選的超連結。可以使用另一種型別的 **對話方塊** 來顯示超連結。

**確認對話方塊**，顧名思義，用於在執行特定操作之前獲取使用者的確認。讓我們首先看看確認 **對話方塊** 如何工作。

使用 window.confirm() 方法

window.confirm() 方法將需要顯示在確認對話方塊中的字串訊息作為引數。它根據使用者選擇的選項返回布林值。此返回值可以在條件語句中使用以執行操作。

語法

if(window.confirm(" Confirm box message ")){
   // action you want to perform
}

window.confirm() 返回的布林值由 if 語句評估，然後執行或不執行操作。

示例 1

在下面的程式碼片段中，我們將建立一個嘗試複製當前選項卡的按鈕。將彈出一個確認對話方塊，使用者必須對其做出響應。

<!DOCTYPE html>
<html>
<head>
   <title>URL of a document in JavaScript Example</title>
</head>
<body>
   <center>
      <p>This button will create a new browser tab with the same content. </p>
   </center>
   <div id = "url"></div>
   <script>
      var url = document.URL;
      document.getElementById("url").innerHTML = "URL: " + str;
      function replicateTab(){
         if(window.confirm("Are you sure you want to replicate ?")){
            window.open(url);
         }
      }
   </script>
   <center>
      <button id = "button" onclick = "replicateTab()">Click me to replicate ! </button>
   </center>
</body>
</html>

複製按鈕觸發 **replicateTab()** JavaScript 函式，該函式會建立一個確認框，響應該框，選項卡將被複制或不復制。

使用 jQuery 在 JavaScript 警示框中顯示超連結

我們將使用 **jQuery UI 對話方塊** API 建立一個自定義警示框。jQuery 允許靈活地在對話方塊中放置超連結。使用 jQuery 建立的對話方塊比純 JavaScript 更具可定製性和使用者友好性。與 JavaScript 中的警示框不同，jQuery 提供的對話方塊可以移動、調整大小以及使用 CSS 進行自定義。

我們在 jQuery 中使用 **選擇器** 來使用類、id 等操作不同的 HTML 元素。選擇器是 jQuery 框架的一部分，它使導航和操作 HTML 文件變得容易。請注意，這些選擇器類似於 CSS 選擇器。

$(selector).dialog(options)

其中選擇器可以是類、id 或標籤。此行使用提供的選擇器在 jQuery 中建立一個對話方塊。jQuery 的對話方塊 API 提供了許多不同的功能，例如 **標題、按鈕、寬度、高度** 等。

使用選擇器引用文件中各種 HTML 元素的這種模式是 jQuery 的一個常見特性。我們將使用它來引用指令碼的其他部分，但由於 jQuery 新增的抽象，其方式將不同於 JavaScript。

示例 2

在這裡，我們將使用 jQuery 建立一個自定義警示框並將其附加到 HTML 文件的主體。對話方塊包含一個可點選的超連結，該超連結複製當前選項卡。在執行任何指令碼程式碼之前，我們首先檢查 DOM（文件物件模型）是否已準備好。這是藉助 jQuery(document).ready() 函式完成的。當達到就緒狀態時，作為 ready() 內部引數提供的程式碼塊將執行。在這裡，我們將提供一個函式，該函式在自定義警示對話方塊中顯示一個可點選的超連結。

**注意** - 我們必須透過提供相應的連結來匯入 jQuery、jQuery UI 和 jQuery UI 樣式表。

讓我們看看相同的程式碼。

<!DOCTYPE html>
<html>
<head>
   <title>Online Javascript Editor</title>
   <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
   <div id="alertBox">
      <a id="myLink" target="_blank">New Tab</a>
   </div>
   <script>
      $(document).ready(function() {
         var url = document.URL;
         
         // attach the current document URL to the anchor element
         $("#myLink").attr("href", url);
         $("#alertBox").dialog({
            title: "Create duplicate tab ?",
            minWidth: 200
         });
      });
   </script>
</body>
</html>

在上面的程式碼中，我們使用 jQuery 的選擇器模式引用 HTML 文件的主體並將文件 URL 附加到 <a> 元素。

**注意** - 警示框是對話方塊的一部分，對話方塊是 **模態視窗**。這些型別的視窗在呈現時會完全獲取焦點，並且在對框執行操作之前不會關閉，從而阻止使用者與網頁互動。此類 UI 元素應僅用於重要的警示和警告。

結論

JS 中的警示框用於顯示重要訊息、警示或警告。應在適當的位置明智地使用它們以增強使用者體驗。

更新於： 2022年9月21日

8K+ 閱讀量

啟動您的 職業生涯

透過完成課程獲得認證

開始學習
廣告