使用 Javascript 自定义警报

IT技术 javascript
2021-03-13 10:10:23

如何在 Javascript 中创建自定义警报功能?

6个回答

您可以覆盖对象alert上存在的现有函数window

window.alert = function (message) {
  // Do something with message
};

这是我想出的解决方案。我编写了一个通用函数来创建一个 jQueryUI 对话框。如果需要,您可以使用 Matt 的建议覆盖默认警报功能:window.alert = alert2;

// Generic self-contained jQueryUI alternative to
// the browser's default JavaScript alert method.
// The only prerequisite is to include jQuery & jQueryUI
// This method automatically creates/destroys the container div
// params:
//     message = message to display
//     title = the title to display on the alert
//     buttonText = the text to display on the button which closes the alert
function alert2(message, title, buttonText) {

    buttonText = (buttonText == undefined) ? "Ok" : buttonText;
    title = (title == undefined) ? "The page says:" : title;

    var div = $('<div>');
    div.html(message);
    div.attr('title', title);
    div.dialog({
        autoOpen: true,
        modal: true,
        draggable: false,
        resizable: false,
        buttons: [{
            text: buttonText,
            click: function () {
                $(this).dialog("close");
                div.remove();
            }
        }]
    });
}

从技术上讲,您可以更改警报功能的作用。但是,您不能更改由本机警报功能启动的模态窗口的标题或其他行为(除了文本/内容)。

好吧,这就是我需要知道的。+1。但是接受了 advait 的回答,因为他给了我一个替代解决方案。
2021-04-21 10:10:23

如果您正在寻找 javascript/html/css 替代品,我建议您查看jQueryUI及其对模态对话框的实现

“覆盖”方式不够好,建议您创建自定义弹出框。此解决方案的最大好处是您可以控制每一个细节。

我建议只编辑您的答案以包含这些链接。
2021-05-05 10:10:23
Simple Popup是另一种轻量级的替代品。
2021-05-09 10:10:23