JS : Créer une modal d'erreur bootstrap réutilisable
30 Mars 2016
, Rédigé par Antoine SEJALON
Publié dans
#Asp.net, #JavaScript
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 :
<![CDATA[
<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">×</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 :
<![CDATA[
<style>
#textModalErreur {
color: darkred;
font-weight: bold;
}
</style>
]]>
Créez une fonction JS* générique :
<![CDATA[
<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* :
<![CDATA[
<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.
/image%2F1968241%2F20160202%2Fob_b24ac1_photoweb.jpg)
/image%2F1968241%2F20200327%2Fob_815c4f_csharp.jpg)
/image%2F1968241%2F20180228%2Fob_bcb0e4_modal.jpg)
/image%2F1968241%2F20161018%2Fob_80ccde_ban-csharp.jpg)
/image%2F1968241%2F20160309%2Fob_15c6a0_metafizzy.PNG)
