那些不同样式的“弹出”框的正确术语是什么？如何实现它们？

Question

这些盒子叫什么？ （下图中的红色错误警报之一？我以为它们会被称为弹出框，但是当我转到http://www.w3schools.com/js/js_popup.asp并学习了如何编写这些代码时，略有不同，不同之处在于网站上的那个要求您先关闭它或接受它的错误然后再继续；而他们在堆栈溢出中使用的那个或其他网站会提醒用户，但允许您进行输入或执行操作而不是必须先关闭它然后继续。所以任何人都可以告诉我它们的正确名称，因为当我在Google JavaScript弹出框中显示时，我只会得到上面链接等返回的东西，并且有人可以将我链接到我在其中的页面可以学习如何做或以一些基本的语法开始

Answer 1

他们有很多名字：

• 弹出
• 酥料饼
• 提示
• 页内通知
• 警报（不要与alert功能混淆）

基本上，它们只是具有定位信息和更高的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.">