MICROsouffle

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.

Partager cet article

Repost0
Pour être informé des derniers articles, inscrivez vous :

Commenter cet article

Hichem Mahmoud 15/04/2019 12:40

Comment insérer la date d'une page web en utilisant Javascript ?

Hichem Mahmoud : clinique medpasteur 15/04/2019 12:37

Le problème c'est que google, le premier moteur de recherche au monde pénalise le contenu masqué !

Rhinooplastie Tunisie 15/04/2019 12:35

Super ; Bravo

Clinique chirurgie esthetique 15/04/2019 12:33

Cet article est original !

chirurgie esthetique : Hichem Mahmoud 15/04/2019 12:31

Je suis pas informaticien, mais ce blog est super bravo :)

chirurgie esthetique 15/04/2019 12:30

Merci pour la pertinence de ce tutoriel , bonne continuation !