jQuery UI boîte de Dialogue d'Alerte comme un remplacement pour le alert()

Je suis en utilisant alert() à la sortie de mes erreurs de validation à l'utilisateur que mon dessin n'est pas pour autre chose, mais je préfère utiliser jQuery UI la boîte de dialogue de la boîte de dialogue alerte de mon message.

Car les erreurs ne sont pas contenus dans un (html) div, je ne suis pas sûr de savoir comment aller à ce sujet. Normalement, vous pouvez assigner le dialog() à un div dire $("#divName").dialog() mais j'ai plus besoin d'une fonction js quelque chose comme alert_dialog("Custom message here") ou quelque chose de similaire.

Des idées?

InformationsquelleAutor mauzilla | 2011-11-10
  1. 44

    Je ne pense pas que vous même pas besoin de l'attacher à la DOM, cela semble fonctionner pour moi:

    $("<div>Test message</div>").dialog();

    Voici un JS fiddle:

    http://jsfiddle.net/TpTNL/98

    InformationsquelleAutor Clive
  2. 26

    À l'aide de certains de l'info 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' );
            }
        }
    });
}
    • Absolument fabuleux petits scriptlet là! Merci de poster! Voir ma réponse ci-dessous où j'ai ajouté un peu de ce...
    InformationsquelleAutor EkoJR
  3. 4

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

    • il fonctionne par $("<div></div>").html("VOTRE MESSAGE").la boîte de dialogue();
    InformationsquelleAutor SBerg413
  4. 4

    Bâtiment sur eidylon réponse, voici une version qui ne sera pas afficher 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

    InformationsquelleAutor kofifus
  5. 2

    Comme mentionné par nux et micheg79 un nœud est laissée derrière, dans les DOM, après la boîte de dialogue se ferme.

    Cela peut aussi être nettoyé simplement en ajoutant:

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

    de la méthode de fermeture de la boîte de dialogue.
    Exemple en ajoutant cette ligne à eidylon réponse:

    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 de prise en fonction de callback à exécuter et trouvé que j'avais à ajouter des parenthèses () pour onCloseCallback pour déclencher la fonction de rappel. Cela m'a aidé à comprendre pourquoi: En JavaScript, cela fait-il une différence si je l'appelle une fonction avec des parenthèses?

    InformationsquelleAutor datascript
  6. 1

    DAlert jQuery UI Plugin Check this out, Cela peut vous aider à

    InformationsquelleAutor Dilusha Gonagala
  7. 1

    J'ai pris @EkoJR réponse, et ajouté un paramètre supplémentaire à passer avec une fonction de rappel pour 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 ensuite appeler et de passer d'une fonction, qui va se produire 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' })
    InformationsquelleAutor eidylon
  8. 0

    Utilisez cette syntaxe de code.

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

    cela fonctionne, mais il ajoute un nœud du 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'});
}
    InformationsquelleAutor micheg79
  9. 0

    Il ya un problème que si vous fermez la boîte de dialogue exécuter la onCloseCallback fonction. 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" );
            }

        },
    });
    InformationsquelleAutor Chris