如何在 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+ 阅读量

启动您的 职业生涯

通过完成课程获得认证

开始学习
广告