Souvent dans une application lorsqu’on a une fonction qui va supprimer quelque chose, on demande confirmation par sécurité. Dans le développement web, cela peut se faire par exemple avec confirm() de Javascript, déclenché par le clic sur un lien avec l’attribut onclick de la balise a. Ceci est bien old-school pour plusieurs raisons que je ne parlerai pas ici.
Ce court billet met en place une boîte de dialogue de confirmation utilisant Bootstrap, apportant un aspect un peu plus joli que la fenêtre système de confirmation.
$(function() {
$('a[data-confirm]').click(function(ev) {
var href = $(this).attr('href');
if (!$('#dataConfirmModal').length) {
$('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="dataConfirmLabel">Merci de confirmer</h3></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Non</button><a class="btn btn-danger" id="dataConfirmOK">Oui</a></div></div></div></div>');
}
$('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
$('#dataConfirmOK').attr('href', href);
$('#dataConfirmModal').modal({show:true});
return false;
});
});
Comme on le voit dans le code jQuery, cette action est déclenchée lors d’un clic sur un élément a possédant un attribut data-confirm qui par ailleurs servira de titre à la fenêtre modale. Voici un exemple de lien qui ouvre la modale :
<a href="" data-confirm="Etes-vous certain de vouloir supprimer?">Suppression</a>
Testez vous-même avec l’exemple ci-contre : bootstrap-modal.zip
Excellent !!!! merci beaucoup .
pour utiliser ajax je ajouter :
$(function(){
$(document).on('click','#dataConfirmOK',function(e) {
e.preventDefault();
$('#dataConfirmModal').modal('hide');
$.ajax($(this).attr("href"),{success:MyCallbackFunction})
})
})
Stp Où est ce que tu as ajouté ce code dans le code existant afin de faire de l’ajax ?
Merci j’ai trouvé
Trop cool comme code de confirmation!!!!
merci :)
De rien Oussama!
Bonjour comment fait t’on pour que la fenêtre arrive avec une animation un peut a la donc des modal de bootstrap
Bonjour, lors du clic sur la confirmation ‘Oui’, ma page est bien appelée mais mon modal ne se ferme pas…
Avez- vous de suggestions?
Cet article explique comment remplacer la fenêtre de base par une modal, le clic sur le bouton « Oui » fait partie de la logique arrivant ensuite, donc libre à chacun de faire ce que bon lui semble.