JQuery : introduction boite de dialogue

Comment faire une boite de dialogue avec JQuery ?

Nous partons du principe que cette API est téléchargée et intégrée à votre projet.

D'abord commençons par les déclarations nécessaires pour initialiser JQuery - à inclure dans votre page PHP (entre les balises HEAD) :

<link rel="stylesheet" type="text/css"
href="css/jquery-ui-1.8.11.custom.css" />

<script type="text/javascript" src="js/jquery-1.x.x.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.x.x.custom.min.js"></script>

"xx" représente le numéro de version de JQuery.


Ensuite préparons et affichons un exemple de boite de dialogue :

function dataHTML() {
    var dataHTML = "<p>Bonjour< br />, exemple d'une boite de dialogue !</p>";

    return dataHTML;
}

$(document)
.ready(
function() {
var $dialog = $('<div></div>')
.html(dataHTML)
.dialog(
       {
autoOpen : true,
draggable : true,
title : "<img src='images/mon_image.png' />&nbsp;&nbsp;<span style='position: relative; top: -20px; font-size: 14px;'>le titre de la boite de dialogue</span>",
width : 'yyypx',
height : 'auto',
close : function(ev, ui) {
$(this).remove();
}
});

$('#opener').click(function() {
$dialog.dialog('open');
return false;
});
});

yyy représente la largeur en pixels de votre dialogue.


Dans cet exemple nous ouvrons une boite de dialogue simple qui peut être fermée par le bouton <close> et qui peut être déplacée.