Question

我想用我自己的替换本机javascript alert（），这样我就可以控制主题并让它具有更多JQueryUI的外观和感觉。我尝试了很多替代方案--JQueryUI Dialog，jAlert，jqAlert。但是，似乎所有这些都不像原始警报那样以同样的方式同步运行。

示例：

function mytest()
{
    alert('one');
    alert('two');
    alert('three');
}

在此示例中，使用原始alert（），3个对话框将一个接一个地出现。但在替代品中，它们一下子出现了！

有什么想法吗？

Answer 1

原生alert()会使浏览器停止停止。您将找不到任何第三方库，因为这是不可能的。*

修改

我汇总了一个关于如何使用单个jQuery对话框而不是警报的快速演示。

var alertManager = (function() {
    var _queue = [],
        _opts = {
            modal: true,
            autoOpen: false,
            buttons: {
                OK: function ()
                {
                    $(this).dialog('close');
                    var next = _queue.shift();
                    if (typeof next === 'string')
                    {
                        _dialog.text(next).dialog('open');
                    }
                }
            }
        },
        _dialog = $('<div id="alertDialog" title="Alert!"></div>').dialog(_opts),

        _self = {};

    _self.show = function (message) {
        if (_dialog.dialog('isOpen')) {
            _queue.push(String(message));
        }
        else {
            _dialog.text(message).dialog('open');
        }
    }

    return _self;
}());



$('#clicky').click(function ()
{
    alertManager.show('alert numero uno');
    alertManager.show('alert #2');
    alertManager.show({foo: 'bar'});
    alertManager.show(document.getElementById('clicky'));
    alertManager.show('last one');
});

Hot demo action over here →

你也可以很容易地把它变成一个jQuery插件。

_{*虽然您可以使用在对话框打开时旋转的while循环伪造它。我不推荐这个。}

Answer 2

我很久以前找到了一个库来解决这个问题的警报，提示和确认，这很容易使用：

在这里演示：http://labs.abeautifulsite.net/archived/jquery-alerts/demo/

// Usage:
//      jAlert( message, [title, callback] )
//      jConfirm( message, [title, callback] )
//      jPrompt( message, [value, title, callback] )

从这里下载：http://labs.abeautifulsite.net/archived/jquery-alerts/jquery.alerts-1.1.zip

Answer 3

~~一个jquery警报：~~

JQuery.fn.alert = function(message) { alert(message); };

使用示例：

$("#item1").alert("hello");

<击> 我的天啊：D

jquery只是一个DOM框架。这不是其他的javascript！ jquery只是一些javascript行。而不是取代javascript。

如果你想创建一个对话框，我可以建议你搜索jquery插件。

http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/

Answer 4

如果您正在寻找替代行为，您可能想尝试： http://plugins.jquery.com/project/freeow

它还会提醒用户，但不会像“Matt Ball”所说的那样锁定浏览器

Answer 5

您可以使用jQueryUI对话框轻松模仿常规js警报的同步性。只需使用提供的事件 - 在这种情况下，close，在关闭对话框时调用：

<div id="dialog" title="Dialog Title">Dialog</div>
<div id="dialog2" title="Dialog Title">Another dialog</div>
$("#dialog").dialog({
    close: function(event, ui) {
        $("#dialog2").dialog();
    }
});

现在，当您关闭第一个对话框时，第二个对话框将打开。

Answer 6

您可以使用并完美控制此ui对话框http://jqueryui.com/demos/dialog/

只需在需要时唤起它们。

Answer 7

如何分层警报？
它们仍会一下子出现，但是用户只看到第一个，直到她关闭，然后第二个出现（显示）等等。
- 可以通过更新“全局”last-z-index变量轻松实现。

Answer 8

与此同时，我最近还创建了一个新功能，允许使用jqueryui对话框确认框。

使用起来非常简单

dlgConfirm('Are you sure you want to cancel this change-email request? <br><label>Current password<br><input type="password"></label>',
             'Cancel Email Change', 'Continue', function(dlg){
       //do ajax or something
       return false; //do not close dialog until ajax is complete
    }

dlgConfirm('Are you sure you want to submit this form', function(dlg){
    $('form', dlg).submit();
    return true;
});

这是源代码（公共领域）：

<script>
   /**
    * Open confirmation dialog (jqueryui modal)
    *
    * @param {string} c_text text/html to show in the dialog box
    * @param {string|function(dlg_element)} c_title|confirm_callback title of the dialog box (or callback function)
    * @param {string|function(dlg_element)} c_btn_text|confirm_callback confirm button text (or callback function)
    * @param {string|function(dlg_element)} c_btn_cancel_text|confirm_callback cancel button text (defaults to 'Cancel') (or callback function)
    * @param {function(dlg_element)} confirm_callback callback after the modal box is confirmed 
    */
   function dlgConfirm(c_text, c_title, c_btn_text, c_btn_cancel_text, confirm_callback){

      if (typeof(confirm_callback) !== 'function'){
         if (typeof(c_title) == 'function'){
            confirm_callback = c_title;
         }else if (typeof(c_btn_text) == 'function'){
            confirm_callback = c_btn_text;
         }else if (typeof(c_btn_cancel_text) == 'function'){
            confirm_callback = c_btn_cancel_text;
         }
      }

      if (typeof(c_text) !== 'string'){
         c_text = 'Are you sure?';
      }
      if (typeof(c_title) !== 'string'){
         c_title = 'Confirm';
      }  
      if (typeof(c_btn_text) !== 'string'){
         c_btn_text = 'Confirm';
      }  
      if (typeof(c_btn_cancel_text) !== 'string'){
         c_btn_cancel_text = 'Cancel';
      }     

      if ($('#dlgConfirm').length == 0){
         $('body').append('<div id="dlgConfirm" title="Confirm" style="display: none">Are you sure?</div>');
      }
      var btns = {};
      btns[c_btn_text] = function() {
             var dlg = this;
             if (typeof(confirm_callback) == 'function'){
                if (confirm_callback(dlg) !== false){
                   $(this).dialog('close');
                }
             }          
      };
      btns[c_btn_cancel_text] = function() {
             $( this ).dialog("close");
      };

      $('#dlgConfirm').dialog({
         title: c_title,
         autoOpen: false,
         resizable: false,
         //height:170, //commented out so autosize works
         modal: true,
         buttons: btns
       }).html(c_text).dialog('open');
   }
   </script>

Answer 9

DAlert jQuery UI Plugin 试试这个：andrewdex.github.io/dalert

任何JQuery alert（）替换JavaScript的本机？

9 个答案:

修改

Hot demo action over here →