如何使用CSS样式化警告框？

Question

-- 更新 -- 我已经阅读了很多关于此主题的内容，尝试了几个脚本，并需要帮助找出您可以或不可以做什么。社区回答了所有问题，以下是一个很好的起点。（下面社区提取的答案，谢谢）

1. 您无法覆盖警报的默认样式。它由您的客户端（例如chrome firefox等）生成。

2. 您可以使用jquery代替。而不是使用类似以下脚本的脚本：

   function check_domain_input() { var domain_val = document.getElementsByName('domain'); if (domain_val[0].value.length > 0) { return true; } alert('Please enter a domain name to search for.'); return false; }

这将使客户端（firefox chrome等）生成一个警报框。

2b. 您告诉代码如果某些事情需要在事件加载jquery警报框上发生，您可以使其变得漂亮：（由Jonathan Payne回答并创建。谢谢）

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" type="text/css" media="all" />

<div onclick="check_domain_input()">Click</div>

<div id="dialog" title="Attention!" style="display:none">
    Please enter a domain name to search for.
</div>

<script>
    function check_domain_input()
    {        
        $( "#dialog" ).dialog(); // Shows the new alert box.

        var domain_val = document.getElementsByName('domain');

        if (domain_val[0].value.length > 0)
        {
            return true;
        }

        $( "#dialog" ).dialog();

        return false;
    }
</script>

请查看这里的jsFiddle：http://jsfiddle.net/8cypx/12/

（此内容为HTML格式，无需翻译）

- david

---

使用 jQuery UI Dialog。 - MrOBrian

https://dev59.com/dmsz5IYBdhLWcg3wg4Cv#7853150 - Robert Harvey

我回答了你的第一个和第二个问题。你可以在下面看到我的答案。 - Jonathan Payne

我知道，写一些清晰易懂的东西回馈社区，因为我在这里进行了搜索，有很多相关内容，但如果你花时间总结你的发现而不是匆忙给出答案，也许其他人也会阅读并不必创建一个新话题… - david

@DavidWalter 不要这样做。通过编辑掉有意义的内容，你已经破坏了你的问题。剩下的内容不适合在该网站上发布，除非你进行修正，否则它将被关闭和删除。 - user229044

Answer 1

请尝试使用位于此处的jQuery UI：http://jqueryui.com/demos/dialog/

他们有一个主题样式设置器，您可以用它来设计对话框和模态框。

-- 编辑 --

回答你的第二个问题。

在这里查看jsFiddle：http://jsfiddle.net/8cypx/12/

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" type="text/css" media="all" />

<div onclick="check_domain_input()">Click</div>

<div id="dialog" title="Attention!" style="display:none">
    Please enter a domain name to search for.
</div>

<script>
    function check_domain_input()
    {        
        $( "#dialog" ).dialog(); // Shows the new alert box.

        var domain_val = document.getElementsByName('domain');

        if (domain_val[0].value.length > 0)
        {
            return true;
        }

        $( "#dialog" ).dialog();

        return false;
    }
</script>

​

- Jonathan Payne

---

谢谢你，我能够理解那个。我认为经过几周的使用jQuery，你已经将它放在了透彻的角度上，感谢您先生和其他所有人。 - david

Answer 2

与其使用难看且无法通过CSS自定义的内置Javascript对话框弹出窗口，我建议使用jQuery对话框控件。这些控件可以轻松地进行样式设计，并且jQuery还附带了许多内置主题供使用。

http://docs.jquery.com/UI/Dialog

- Alex Weinstein

---

希望你不只是贴了那个链接！我阅读了所有的链接，但无法在我的网站上使其正常工作。我的问题是如何覆盖警告框的默认样式。 - david

无法覆盖默认警告框的样式。抱歉。 - Alex Weinstein

谢谢您解释为什么我找不到相关内容！那么，我该如何更改上面的脚本来调用一个div？ - david

您可以使用myAlert（和alert类似）来显示 jQuery UI 对话框，只需添加以下行： myAlert = function (body, title) { $("<div title=\"" + (title ? title : document.title + " says") + "\">" + body + "</div>").dialog(); };（您也可以覆盖 alert, 但通常不建议这样做。）。或者按照帮助页面所示：在HTML中创建一个 div 元素，将消息内容添加到 div 中，然后调用 $("#your-div").dialog()。 - meloncholy

我的警告是什么？你能再解释一下吗？ - david

Answer 3

如果我理解你的问题正确，我认为你不能这样做，因为弹出窗口已经与客户端系统绑定在一起。不过，设计你所描述的并不难，可以查看一个DIV元素或其他东西。

- Konrad Viltersten

---

我该如何将它更改为查找div呢？ - david

Answer 4

使用以下插件 http://plugins.jquery.com/msgbox/ 并使用下面的代码。

$.alert('text');

代替alert('text'); 使用CSS进行定制化

- Shan

Answer 5

确认/警告框是浏览器的一部分，而不是您的页面。

- Abhishek Mehta