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.

Lire la suite

RT @Technet_France: Ne jamais rester sur ses...

28 Février 2018 , Rédigé par SEJALON Antoine

Lire la suite

https://t.co/dbvTgLSnRJ

28 Février 2018 , Rédigé par SEJALON Antoine

Lire la suite

https://t.co/7wXmKK4XMm

28 Février 2018 , Rédigé par SEJALON Antoine

Lire la suite

RT @Projetlys: [RECRUTEMENT] Nous recherchons...

27 Février 2018 , Rédigé par SEJALON Antoine

Lire la suite

RT @Projetlys: #CRM : l' #IA améliore le #scoring...

27 Février 2018 , Rédigé par SEJALON Antoine

Lire la suite

https://t.co/hUPHB7jWWZ

26 Février 2018 , Rédigé par SEJALON Antoine

Lire la suite

https://t.co/qnq0jT9nl0

26 Février 2018 , Rédigé par SEJALON Antoine

Lire la suite

https://t.co/KN0L20Ldsg

26 Février 2018 , Rédigé par SEJALON Antoine

Lire la suite

https://t.co/kkY3QsNkpR

23 Février 2018 , Rédigé par SEJALON Antoine

Lire la suite