Ce plugin de boîte de dialogue, inspiré du style Bootstarp, offre actuellement des foncitonnalités de confirmation et d'alerte. Des améliorations et extensions futures seront ajoutées ultérieurement.

;(function($){
    //Paramètres par défaut
    var PARAMETRES;
    var PARAMETRES_DEFAUT = 
                    {
                        largeur: 500,
                        titre: 'Message',
                        contenu: '',
                        boutonOk: 'OK',
                        boutonAnnuler: 'Annuler',
                        fondEnTete: 'info',
        arrierePlan: 'static',        //Par défaut, le modal ne se ferme pas en cliquant sur le fond
        clavier: true,            //Ferme le modal avec la touche ESC
        fonctionConfirmer: new Object,
        fonctionAnnuler: new Object
                    };
    
    $.boiteDialogue = {
        confirmer: function(parametres){
            $.boiteDialogue.initialiserParametres(parametres);
            $.boiteDialogue.afficher('confirmer', function(e){
                if($.isFunction(PARAMETRES.fonctionConfirmer)){
                    PARAMETRES.fonctionConfirmer(e);
                }
            }, 
            function(f){
                if($.isFunction(PARAMETRES.fonctionAnnuler)){
                    PARAMETRES.fonctionAnnuler(f);
                }
            });
        },
        alerter: function(parametres){
            $.boiteDialogue.initialiserParametres(parametres);
            $.boiteDialogue.afficher('alerter', function(e){
                if($.isFunction(PARAMETRES.fonctionConfirmer)){
                    PARAMETRES.fonctionConfirmer(e);
                }
            }, null);
        },
        afficher: function(type, appelantConfirmer, appelantAnnuler){
            var html = '<div class="modal fade" id="modalDialogue">'
                     + '<div class="modal-dialog" style="width:'+PARAMETRES.largeur+'px"><div class="modal-content">'
                     + '<div class="modal-header header_'+PARAMETRES.fondEnTete+'">'
                     + '<a class="close" data-dismiss="modal">&times;</a>'
                     + '<h4 class="modal-title text-center">'+PARAMETRES.titre+'</h4></div>'
                     + '<div class="modal-body text-center corps">'+PARAMETRES.contenu+'</div>'
                     + '<div class="modal-footer">';
            if(type=='confirmer'){
                html += '<button class="btn btn-default" id="boutonAnnuler">'+PARAMETRES.boutonAnnuler+'</button>';
            }
            html += '<button class="btn btn-primary" id="boutonOk">'+PARAMETRES.boutonOk+'</button>';
            html += '</div></div></div></div>';
            $('body').append(html);
            $('#modalDialogue').modal({backdrop:PARAMETRES.arrierePlan,keyboard:PARAMETRES.clavier});
            $.boiteDialogue.definirEvenements(type, appelantConfirmer, appelantAnnuler);
        },
        initialiserParametres: function(parametres){
            if(parametres!= undefined && parametres!= null){
                PARAMETRES = $.extend({}, PARAMETRES_DEFAUT, parametres);
            }
        },
        definirEvenements: function(type, appelantConfirmer, appelantAnnuler){
            switch(type){
                case 'confirmer':
                    $("#boutonOk").click(function(){
                        $('#modalDialogue').modal('hide');
                        $('#modalDialogue').on('hidden.bs.modal', function(){
                            $('#modalDialogue').remove();                
                            if($.isFunction(appelantConfirmer)){
                                appelantConfirmer(true);
                            }
                        });
                    });
                    $("#boutonAnnuler").click(function(){
                        $('#modalDialogue').modal('hide');
                        $('#modalDialogue').on('hidden.bs.modal', function(){
                            $('#modalDialogue').remove();
                            if($.isFunction(appelantAnnuler)){
                                appelantAnnuler(false);
                            }
                        });
                    });
                    break;
                case 'alerter':
                    $("#boutonOk").click(function(){
                        $('#modalDialogue').modal('hide');
                        $('#modalDialogue').on('hidden.bs.modal', function(){
                            $('#modalDialogue').remove();
                            if($.isFunction(appelantConfirmer)){
                                appelantConfirmer(true);
                            }
                        });
                    });
                    break;
            };
            $('#modalDialogue').on('hidden.bs.modal', function(){
                $('#modalDialogue').remove();
            });
            $("#modalDialogue .close").click(function(){
                $('#modalDialogue').on('hidden.bs.modal', function(){
                    $('#modalDialogue').remove();
                });
            });
            //Rendre la fenêtre déplaçable
            $('#modalDialogue .modal-header').deplacable($('#modalDialogue .modal-dialog'));
        }
    };

    dialogueConfirmer = function(parametres){
        $.boiteDialogue.confirmer(parametres);
    };

    dialogueAlerter = function(parametres){
        $.boiteDialogue.alerter(parametres);
    };
})(jQuery);

//Fonctionnalité de déplacement
;(function($){
    $.fn.extend({
        deplacable: function(objetDeplace){
            return this.each(function(){
                //Position de la souris lors du clic
                var positionSourisX, positionSourisY;
                //Position initiale de l'objet
                var objetPosX, objetPosY;
                //Distance de déplacement de la souris
                var tempX, tempY;
                //Objet à déplacer
                var obj = $(objetDeplace)==undefined ? $(this): $(objetDeplace);

                //État du déplacement
                var etat = false;

                $(this).mousedown(function(e){
                    etat = true;
                    positionSourisX = e.pageX;
                    positionSourisY = e.pageY;
                    objetPosX = obj.css("left").replace("px", "");
                    objetPosY = obj.css("top").replace("px", "");
                }).mouseup(function(){
                    etat = false;
                }); 
                $(document).mousemove(function(e){
                    if(etat){
                        tempX = parseInt(e.pageX) - parseInt(positionSourisX) + parseInt(objetPosX);
                        tempY = parseInt(e.pageY) - parseInt(positionSourisY) + parseInt(objetPosY);
                        obj.css({ "left": tempX + "px", "top": tempY + "px" }); 
                    }
                    //Vérifier si l'objet dépasse la fenêtre
                    var droiteFenetre = parseInt($(window).width())-(parseInt(obj.css("left"))+parseInt(obj.width()));
                    var basFenetre = parseInt($(window).height())-(parseInt(obj.css("top"))+parseInt(obj.height()));
                    var maxGauche = $(window).width()-obj.width();
                    var maxHaut = $(window).height()-obj.height();
                    if(parseInt(obj.css("left"))<=0){
                          obj.css("left","0px"); 
                    }
                    if(parseInt(obj.css("top"))<=0){
                        obj.css("top","0px"); 
                    }
                    if(droiteFenetre<=0){
                        obj.css("left",maxGauche+'px'); 
                    }
                    if(basFenetre<=0){
                        obj.css("top", maxHaut+'px');
                    }
                }).mouseup(function(){
                    etat = false;
                }).mouseleave(function(){
                    etat = false;
                });
            });
        }
    });
})(jQuery)

Utilisation dans une page HTML :

<body>
<div class="conteneur">
    <button class="btn btn-defaut" id="bouton_confirmer">Boîte de confirmation</button>
    <button class="btn btn-defaut" id="bouton_alerter">Boîte d'alerte</button>
</div>
</body>
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="js/dialogue.js"></script>
<script type="text/javascript">
$(function(){
    $("#bouton_confirmer").click(function(){
        dialogueConfirmer({
            largeur: 500,
            contenu: 'Êtes-vous sûr de vouloir supprimer ?',
            fondEnTete: 'info',
            arrierePlan: true,        
            clavier: true,            
            fonctionConfirmer: function(e){
                dialogueAlerter({
                    largeur: 300,
                    contenu: 'Suppression réussie',
                    fondEnTete: 'success',
                    arrierePlan: 'static',        
                    clavier: true            
                });
            },
            fonctionAnnuler: function(f){
                console.log('Action annulée: ' + f);
            }
        })
    });

    $('#bouton_alerter').click(function(){
        dialogueAlerter({
            largeur: 300,
            contenu: 'Opération terminée avec succès !',
            fondEnTete: 'danger',
            arrierePlan: 'static',        
            clavier: true,            
        });
    });
});
</script>

Ce plugin est en développement constant. Les améliorations et extensions futures seront ajoutées au fil du temps. Le code source sera disponible en téléchargement.