1

由于我对HTMLand很JavaScript陌生，我想知道弹出窗口是否有可能出现弹出窗口alert()？正如我想我发现的那样，在、JavaScript和中有三个预定义的弹出窗口。但我想制作一个自定义弹出窗口，其中包含代码，但我不知道如何解决这个问题。alert()confirm()prompt()HTML

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

4

8 回答 8

1

进口。

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

于 2012-11-12T20:21:46.917 回答
1

您不能将自定义 HTML 放入警报中。

我会推荐使用jQuery UI Dialogs来创建自定义对话框。它们将通过玻璃窗格显示在您的页面顶部，而不是在弹出窗口中

于 2012-11-12T20:21:57.460 回答
1

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

你可以在这里看到很多例子，我个人喜欢 jQuery 灯箱插件。

于 2012-11-12T20:22:43.683 回答
1

您无法更改浏览器提供的对话框的外观和感觉，这些对话框可以通过您在问题中提到的功能进行访问。

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

于 2012-11-12T20:23:44.220 回答
1

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

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

jQuery 用户界面

http://jqueryui.com/dialog/

推特引导

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>
于 2012-11-12T20:24:04.530 回答
1

我个人会为此使用 Colorbox。Colorbox 非常通用，可用于显示警报以及其他内容。

http://www.jacklmoore.com/colorbox

于 2012-11-12T20:25:02.437 回答
1

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

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

于 2012-11-12T20:26:18.783 回答
0

是的

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>

于 2021-03-01T22:42:46.927 回答