Question

由于我对HTML和JavaScript都很陌生，我想知道弹出窗口是否有alert()这样的弹出窗口？正如我想的那样，JavaScript，alert()，confirm()和prompt()中有三个预定义的弹出式窗口。但我想创建一个自定义弹出窗口，其中包含HTML代码，但我不知道如何处理此问题。

JavaScript本身是否有方法覆盖弹出窗口的外观，或者我是否需要导入某些包来实现此目的？

Answer 1

导入。

一个非常好的例子是Twitter Bootstrap的模态控件 - http：//twitter.github.com/bootstrap/javascript.html#modals。

Answer 2

您无法将自定义HTML放入警报中。

我建议使用jQuery UI Dialogs创建自定义对话框。它们将在您的页面顶部带有玻璃窗，而不是在弹出窗口中

Answer 3

听起来你需要一个灯箱而不一定是一个弹出窗口。周围有很多，如果你使用jquery那么有很多免费的jquery灯箱插件可用。

你可以看到here有很多例子，我个人喜欢jQuery lightbox插件。

Answer 4

您无法改变浏览器提供的音箱的外观，可以通过您在问题中提到的功能访问这些音箱。

您需要在Javascript中构建一些模仿对话框行为的内容。我建议不要从头开始而不是使用允许您轻松创建对话框的库。一个很好的例子是http://jqueryui.com/dialog/。

Answer 5

是。您可以使用许多不同的“弹出窗口”，通常称为模态窗口或对话窗口。

您可以使用jQuery UI或Twitter Bootstrap等库创建HTML自定义提醒。还有其他的可用，但我建议这些更常见。

jQuery UI

http://jqueryui.com/dialog/

Twitter Bootstrap

http://twitter.github.com/bootstrap/javascript.html#modals

jQuery UI页面中的一个模态示例，可以帮助您入门：

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Dialog - Modal confirmation</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(function() {
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "Delete all items": function() {
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    });
    </script>
</head>
<body>

<div id="dialog-confirm" title="Empty the recycle bin?">
    <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>


</body>
</html>

Answer 6

我个人会使用Colorbox。 Colorbox功能多样，可用于显示警报以及其他信息。

http://www.jacklmoore.com/colorbox

Answer 7

有许多包含Popup的JS库，从AjaxControlToolkit到jQuery等。

如果你想保持简单，你可以使用DIV自己创建它。您可以创建一个绝对定位的DIV，它将代表您的弹出窗口并使用JavaScript来显示和隐藏它，例如通过设置DISPLAY或VISIBLE属性。

Answer 8

是的

details > p {
  padding: 0.5rem;
  background: lightcoral;
  margin: 0;
  display: flex;
  flex-direction: column
}

details[open] {
  position: fixed;
  width: 33%;
  left: 33%;
  top: 10vh;
  outline: 10000px #000000d4 solid
}

<details>
  <summary>Popup</summary>
  <p>Powered by html<input></p> 
</details>

<details>
  <summary>Popup</summary>
  <p>Powered by html<input></p> 
</details>

在html页面上设计弹出窗口

8 个答案: