jQuery la boîte de dialogue D'alerte de L'interface utilisateur en remplacement de l'alerte()

en utilisant une partie de l'information ici, j'ai fini par créer ma propre fonction à utiliser.

Pourrait être utilisé comme...

custom_alert();
custom_alert( 'Display Message' );
custom_alert( 'Display Message', 'Set Title' );

jQuery UI Alerte de Remplacement

function custom_alert( message, title ) {
    if ( !title )
        title = 'Alert';

    if ( !message )
        message = 'No Message to Display.';

    $('<div></div>').html( message ).dialog({
        title: title,
        resizable: false,
        modal: true,
        buttons: {
            'Ok': function()  {
                $( this ).dialog( 'close' );
            }
        }
    });
}

il suffit de jeter une div vide et cachée sur votre page html et de lui donner un ID. Ensuite, vous pouvez l'utiliser pour votre dialogue jQuery UI. Vous pouvez remplir le texte comme vous le feriez avec n'importe quel jquery appel.

en S'appuyant sur la réponse d'eidylon, voici une version qui ne montrera pas la barre de titre si TitleMsg est vide:

function jqAlert(outputMsg, titleMsg, onCloseCallback) {
    if (!outputMsg) return;

    var div=$('<div></div>');
    div.html(outputMsg).dialog({
        title: titleMsg,
        resizable: false,
        modal: true,
        buttons: {
            "OK": function () {
                $(this).dialog("close");
            }
        },
        close: onCloseCallback
    });
    if (!titleMsg) div.siblings('.ui-dialog-titlebar').hide();
}

voir jsfiddle

comme mentionné par nux et micheg79 un noeud est laissé derrière dans le DOM après la fermeture de la boîte de dialogue.

Cela peut aussi être nettoyé simplement en ajoutant:

$(this).dialog('destroy').remove();

à la méthode de fermeture du dialogue. Exemple ajouter cette ligne à la réponse d'eidylon:

function jqAlert(outputMsg, titleMsg, onCloseCallback) {
    if (!titleMsg)
        titleMsg = 'Alert';

    if (!outputMsg)
        outputMsg = 'No Message to Display.';

    $("<div></div>").html(outputMsg).dialog({
        title: titleMsg,
        resizable: false,
        modal: true,
        buttons: {
            "OK": function () {
                $(this).dialog("close");
            }
        },
        close: function() { onCloseCallback();
                           /* Cleanup node(s) from DOM */
                           $(this).dialog('destroy').remove();
                          }
    });
}

EDIT: j'ai eu des problèmes pour faire tourner la fonction callback et j'ai trouvé que je devais ajouter parentheses () à onCloseCallback pour déclencher réellement la fonction callback. Ce m'a aidé à comprendre pourquoi: en JavaScript, est-ce que cela fait une différence si j'appelle une fonction avec des parenthèses?

DAlert jQuery UI Plugin Check this out, This may help you

j'ai pris la réponse de @EkoJR, et j'ai ajouté un paramètre supplémentaire à passer avec une fonction de rappel à se produire lorsque l'utilisateur ferme la boîte de dialogue.

function jqAlert(outputMsg, titleMsg, onCloseCallback) {
    if (!titleMsg)
        titleMsg = 'Alert';

    if (!outputMsg)
        outputMsg = 'No Message to Display.';

    $("<div></div>").html(outputMsg).dialog({
        title: titleMsg,
        resizable: false,
        modal: true,
        buttons: {
            "OK": function () {
                $(this).dialog("close");
            }
        },
        close: onCloseCallback
    });
}

vous pouvez alors l'appeler et lui passer une fonction, qui se produira lorsque l'utilisateur ferme la boîte de dialogue, comme suit:

jqAlert('Your payment maintenance has been saved.', 
        'Processing Complete', 
        function(){ window.location = 'search.aspx' })

utilisez cette syntaxe de code.

   $("<div></div>").html("YOUR MESSAGE").dialog(); 

cela fonctionne mais il ajoute un noeud au DOM. Vous pouvez utiliser une classe et ou retirez d'abord tous les éléments de cette classe. ex:

function simple_alert(msg)
{
    $('div.simple_alert').remove();
    $('<div></div>').html(is_valid.msg).dialog({dialogClass:'simple_alert'});
}

il y a un problème que si vous fermez la boîte de dialogue elle exécutera la fonction onCloseCallback. C'est une meilleure conception.

function jAlert2(outputMsg, titleMsg, onCloseCallback) {
    if (!titleMsg)
        titleMsg = 'Alert';

    if (!outputMsg)
        outputMsg = 'No Message to Display.';

    $("<div></div>").html(outputMsg).dialog({
        title: titleMsg,
        resizable: false,
        modal: true,
        buttons: {
            "OK": onCloseCallback,
            "Cancel": function() {
          $( this ).dialog( "destroy" );
            }

        },
    });