Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Changement de blog : retrouvez moi pour un nouveau blog sur : www.micro-souffle.fr

30 Mar

JS : Créer une modal d'erreur bootstrap réutilisable

Publié par Antoine SEJALON  - Catégories :  #Asp.net, #JavaScript

JS : Créer une modal d'erreur bootstrap réutilisable

Bonjour, suite au besoin d’une pop-up pour afficher les messages d’erreurs dans un site Asp.net MVC, j’ai créé un ensemble HTML/JS/CSS réutilisable.

Le model de la modal en elle-même est le schéma de base de bootstrap :

<div class="modal fade" id="modalErreur" role="dialog"> <div class="modal-dialog"> <!-- Modal erreur--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title" id="titreModalErreur"></h4> </div> <div class="modal-body"> <div id="textModalErreur" data-nomsecteur="" data-idajout=""> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Ok</button> </div> </div> </div> </div>

Ajoutez un style pour afficher le texte en rouge :

<style> #textModalErreur { color: darkred; font-weight: bold; } </style>

Créez une fonction JS* générique :

<script type="text/javascript"> function ModalErreur(titre, text) { document.getElementById("titreModalErreur").innerHTML = titre; document.getElementById("textModalErreur").innerHTML = text; $('#modalErreur').modal('show'); } </script>

Faites un appel à cette fonction JS* :

<script type="text/javascript"> ModalErreur("Erreur de création", "La création ... n'a pas fonctionnée."); </script>

A venir : Modal de confirmation (type suppression d'un élément) le plus générique possible.

Merci de votre visite et bon code.

JS : Créer une modal d'erreur bootstrap réutilisable
Commenter cet article

À propos

Changement de blog : retrouvez moi pour un nouveau blog sur : www.micro-souffle.fr