MICROsouffle

Articles avec #javascript tag

Asp.Net MVC : Erreur d'affichage de modal bootstrap

28 Février 2018 , Rédigé par Antoine SEJALON Publié dans #Astuces, #Asp.net, #JavaScript

Asp.Net MVC : Erreur d'affichage de modal bootstrap

Bonjour et bienvenue dans cet article. Je vais vous présenter comment régler le souci du background noir qui passe par dessus la modal.

Pourquoi ?

Une des cause de ce problème vient du fait que votre modal se trouve sur une branche d'éléments html qui dispose d'une propriété css "position" fixe, relative, ...

Le background se place par défaut juste avant la balise de fermeture de "body" et n'est donc pas sur la même branche d'élément. De ce fait et du fait qu'un "position" soit déclaré, changer le z-index ne change rien à la position d'affichage car il ne traite que les éléments d'une même branche.

Solution :

Une solution consiste soit à mettre le code de vos modals directement en bas de balise "body" (le plus simple, mais qui n'est pas forcement faisable dans toutes les situation), soit passer vos modals de leur emplacement d'appel directement en bas de balise "body". Pour ceci, dans votre fichier Javascript, utilisez la methode .appendTo("body") pour placer la modal dans la balise body :

AfficherMaModal() { 
     $("#maModal").modal("show"); 
     $("#maModal").appendTo("body"); 
}

De ce fait, votre modal se retrouve au même niveau que votre background noir.

<body>
     <section>
          <div style="position: absolute">
               <p>Mon contenu</p>
          <div>
     <section>

     <div class="modal">
          <p>Le contenu de ma modal</p>
     </div>
     <div class="modal-overlay"></div>
</body>

en espèrent vous avoir donné des pistes ou une solution. Bon code et à bientôt.

Lire la suite

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"> <!-- 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
Lire la suite