Micro-souffle : mon métier, ma passion, mon partage de connaissances ! Via mon blog je vous propose de partager autour d'articles techniques, de remontés d'informations des réseaux sociaux.

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

30 Mars 2016 , Rédigé par Antoine SEJALON Publié dans #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">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <div class="ob-h4 modal-title" id="titreModalErreur"></div> </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

Partager cet article

Repost0

PowerBi partie 3 : Créer un rapport

C# TimeStamp : comment passer de timestamp à datetime (fuseau horaire compris).

Retour à l'accueil

Commenter cet article