jquery ui - dialogue modal (meilleure façon de créer le contenu de modal?)

Question

Existe-t-il un moyen de définir le contenu modal dans le javascript, plutôt que de toujours avoir un élément sur la page et créer le dialogue?

Il a l'option de titre, donc je peux créer dynamiquement un titre modal, mais qu'en est-il du contenu réel? Comme dis j'en ai besoin pour dire, "tu vas supprimer l'image # 539". Plutôt que de créer un modal pour chaque image possible - ou même de créer l'élément, puis de créer le dialogue à partir de cela.

Il doit y avoir un meilleur moyen.

Answer 1

Vous pouvez essayer quelque chose comme ceci:

HTML

<button id='diag1'>First dialog</button> 
<button id='diag2'>Second dialog</button> 

Javascript

var diag = $('<div id="myDialog" title="Testing!"><span id="dialogMsg"></span></div>'); 

diag.dialog({ 
    autoOpen: false, 
    modal: true 
}); 

$('#diag1').click(function() { 
    $('#dialogMsg').text("Message for dialog 1."); 
    diag.dialog("open"); 
}); 

$('#diag2').click(function() { 
    $('#dialogMsg').text("Message for dialog 2"); 
    diag.dialog("open"); 
}); 

Demo here.

Answer 2

Voici une autre solution, un peu plus dynamique:

function showError(errorTitle, errorText) { 

    // create a temporary place to store our text 
    var window = $('<div id="errorMessage" title="' + errorTitle + '"><span id="dialogMsg">' + errorText + '</span></div>'); 

    // show the actual error modal 
    window.dialog({ 
     modal: true 
    }); 
} 

Ensuite, lorsque vous avez besoin d'appeler l'erreur tout simplement modal faire:

showError("Error-Title", "Error message here"); 

Vous pouvez imaginer l'ajout de paramètres à la fonction de contrôle la largeur, la hauteur, etc.

Enjoy!

Answer 3

Merci Scott. J'ai ajouté un attribut de titre pour la boîte de dialogue:

...

var diag = $('<div id="myDialog" title=""><div id="dialogMsg"></div></div>'); 

...

$('#diag1').click(function() { 
    $('#dialogMsg').html('<div class="dialog-body">Message for dialog 1</div>'); 
    $("#myDialog").dialog({title: 'Dialog Title 1'}); 
    diag.dialog('open'); 
}); 

Demo