javascript - 这些不同样式的 "pop up"框的正确术语是什么以及如何实现它们？

Question

这些盒子叫什么？ (下图中的红色错误警报？我以为它们会被称为弹出框，但是当我去http://www.w3schools.com/js/js_popup.asp时并学会了如何编码这些有细微的差别。不同之处在于，网站上的要求您关闭它或接受它的错误，然后才能继续。而他们在堆栈溢出和其他网站中使用的那个会提醒用户，但允许您继续键入或执行操作，而不必关闭它然后继续。所以谁能告诉我它们正确的名称是什么，因为当我用谷歌搜索 JavaScript 弹出框时，我只得到像上面的链接这样的返回内容。有人可以将我链接到一个页面，我可以在其中学习如何执行此操作或从一些基本语法开始

Answer 1

他们有很多名字:

• 弹出窗口
• 弹出框
• 工具提示
• 页内通知
• 警报(不要与警报功能混淆)

基本上，它们只是具有定位信息和比其下面的元素更高的 z-index 的 DOM 元素。这是一个例子:

document.querySelector("button").addEventListener("click", function() {
  document.querySelector("div").style.display = "block";
}, false);
document.querySelector("div").addEventListener("click", function() {
  this.style.display = "none";
}, false);

.popup {
  position: absolute;
  left: 30px;
  top: 30px;
  background-color: #ee0;
  border: 1px solid #aa0;
  padding: 2px;
}

<button type="button">Click me</button>
<div style="display: none" class="popup">I'm the popup</div>

任何非常非常多的库都提供了执行这些操作的实用程序。两个相当受欢迎的是 Bootstrap和 jQuery UI ，但还有很多其他的。

这是一个 Bootstrap 示例:

$('[data-toggle="popover"]').popover()

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

还有一个 jQuery UI:

$(document).tooltip();

<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<p>Hover the field for the tooltip:</p>
<label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes.">