Bootstrap Modal assis derrière la canvas de fond

Il suffit de déplacer le modal complet en dehors du rest de votre code, tout en bas. Il n’a pas besoin d’être nested dans un autre élément, autre que le corps.

   
 ... 
  
 ... 
  

Démo

Ils font allusion à cette solution dans la documentation.

Placement du balisage modal
Toujours essayer de placer le code HTML d’un modal dans une position de premier niveau dans votre document pour éviter que d’autres composants affectent l’apparence et / ou les fonctionnalités du modal.

Bien que le z-index du .modal soit supérieur à celui du .modal-backdrop , ce .modal trouve dans un div #content-wrap parent dont le z-index est inférieur à .modal-backdrop de .modal-backdrop (z-index: 1002). vs index z: 1030).

Étant donné que le parent a un index z inférieur à celui du .modal-backdrop tout ce qu’il .modal-backdrop sera derrière le modal, quel que soit l’index z donné aux enfants.

Si vous supprimez l’ z-index vous avez défini sur le body div#fullContainer #content-wrap et également sur le #ctrlNavPanel , tout semble fonctionner correctement.

 body div#fullContainer #content-wrap { background: #ffffff; bottom: 0; box-shadow: -5px 0px 8px #000000; position: absolute; top: 0; width: 100%; } #ctrlNavPanel { background: #333333; bottom: 0; box-sizing: content-box; height: 100%; overflow-y: auto; position: absolute; top: 0; width: 250px; } 

NOTE: Je pense que vous avez peut-être initialement utilisé des index z sur # content-wrap et #ctrlNavPanel pour vous assurer que la navigation se trouve derrière, mais ce n’est pas nécessaire car l’élément nav vient avant l’enveloppe de contenu dans le HTML. besoin de les positionner, pas explicitement défini un ordre d’emstackment.

EDIT Comme Schmalzy l’a remarqué, les liens ne sont plus cliquables. C’est parce que le conteneur complet est 100% large et couvre donc la navigation. Le moyen le plus rapide de résoudre ce problème est de placer la navigation dans cette div:

 
  
 ... 
  

DÉMO ICI

Dans mon cas, je pourrais le réparer en ajoutant css pour la .modal-backdrop

 .modal-backdrop { z-index: -1; } 

Bien que cela fonctionne, les contrôles de formulaire semblent toujours apparaître au-dessus de l’arrière-plan, en cliquant n’importe où, le modal est rejeté, mais cela ne semble pas très bien.

Une meilleure solution consiste à lier l’événement affiché (une fois la page chargée) et à corriger la propriété z-index.

 $('.modal').on('shown.bs.modal', function() { $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1); }); 

Dans ce cas, si vous êtes d’accord pour changer le DOM sur modal montré:

 $('.modal').on('shown.bs.modal', function() { //Make sure the modal and backdrop are siblings (changes the DOM) $(this).before($('.modal-backdrop')); //Make sure the z-index is higher than the backdrop $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1); }); 

Aucune des réponses ne me convenait. Le problème est apparu là où les fenêtres modales doivent être à l’extérieur du corps.

Donc, ce code a fait son travail simplement:

 $('.modal ').insertAfter($('body')); 

Dans mon cas, un des parents de mon modal était animé et avait ce

.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; z-index: 100; }

Le bloqueur est ici animation-fill-mode: both; . Je ne pouvais pas simplement déplacer le modal vers l’extérieur, la solution consistait donc à remplacer le mode “animation-fill-mode” par ” animation-fill-mode: none; . L’animation fonctionnait toujours bien.

Certains jours, je me battais avec le même problème … J’ai trouvé trois solutions possibles, mais je ne sais pas, ce qui est le plus optimal, si quelqu’un me le dit, je lui en serai reconnaissant.

les modifications seront dans bootstrap.css

Option 1:

 .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; <- DELETE THIS LINE background-color: #000000; } 

Option 2:

 .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; <- MODIFY THIS VALUE BY -1 background-color: #000000; } 

Option 3:

 /*ADD THIS*/ .modal-backdrop.fade.in { z-index: -1; } 

J'ai utilisé l'option 2.

Une autre solution à ce problème consiste à append z-index: 0; à la classe .modal-backdrop dans votre fichier bootstrap-dialog.css si vous ne souhaitez pas modifier bootstrap.css.

Essayez de supprimer la canvas de fond, si vous n’en avez pas vraiment besoin (data-backdrop = “false”):

 
 
 
 
 
No Backdrop
 
 
 
 Look! No backdrop here! 
 
 
 Cancel Ok 
 
 
  

Si nous ne pouvons pas supprimer backdrop et / ou si nous avons un framework tel que angular ou en vue, nous ne pouvons pas déplacer modal vers la racine. J’ai fait ce truc: mettre mon conteneur de modal-backdrop personnalisé (avec la classe aditional) en tant que frère pour le conteneur de modal-dialog et ajouté des css

 
  
 
 
 
 .... 
 
 
  

et css

 .modal-backdrop{z-index: -1}// or you can disable modal-backdrop .modal-holder.modal-backdrop{z-index: 100} .modal-holder + .modal-dialog {z-index: 1000} 

Vous pourriez utiliser ceci:

 
 .... 
 Adding style="" and data-backdrop false would fix it. 

il suffit de supprimer z-index: 1040 ;

à partir de ce fichier classe bootstrap.css .modal-backdrop

Il me manquait la suite html

l’a ajouté et a travaillé sans problèmes

Puisque je n’ai pas la chance de déplacer le balisage modal depuis que je l’ai ajouté dans un modèle partiel dans un conditionnel, ce qui a fonctionné pour moi est ajouté CSS ci-dessous

 .modal.fade { display: none; } 

Ensuite, quand boostrap ajoute la classe “in” à js, appliquer display: block et tout fonctionne bien.

J’ai trouvé que l’application du ionic framework (ionic.min.cs) après le bootstrap conduisait ce problème pour moi.

Si vous ne pouvez pas mettre le modal à la racine (si votre utilisation angular et le modal est dans un contrôleur par exemple), modifier le bootstrap ou utiliser js est évidemment une mauvaise solution.

en disant que vous avez la structure de votre site Web:

 //not working 
 
 
  
 
  

Ouvrez votre inspecteur de code et déplacez le modal vers la racine, cela devrait fonctionner (mais non où vous voulez):

 //should be working 
 
 
 
 
 
  

mettez-le maintenant dans le premier div et vérifiez si cela fonctionne: si oui, vérifiez le prochain enfant jusqu’à ce qu’il ne fonctionne pas et trouvez le div qui est le problème;

 //should be working 
 
 
 
 
   

Une fois que vous savez quel div est le problème que vous pouvez jouer avec l’affichage CSS et la position pour le faire fonctionner.

tout le monde a une structure différente mais dans mon cas, définir un parent à display: table; était la solution

Mettez ce code où vous voulez

 $('.modal').on('shown.bs.modal', function () { var max_index = null; $('.modal.fade.in').not($(this)).each(function (index , value){ if(max_index< parseInt( $(this).css("z-index"))) max_index = parseInt( $(this).css("z-index")); }); if (max_index != null) $(this).css("z-index", max_index + 1); }); 

Plusieurs fois, vous ne pouvez pas déplacer le modal à l’extérieur, car cela affecte votre structure de conception.

La raison pour laquelle la canvas de fond se situe au-dessus de votre modal est que le parent a une position quelconque.

Un moyen très simple de résoudre le problème si vous déplacez votre modal à l’extérieur est de déplacer la canvas de fond à l’intérieur de la structure si vous avez votre modal. Dans votre cas, cela pourrait être

 $(".modal-backdrop").appendTo("main"); 

Notez que cette solution est applicable si vous avez une structure définie pour votre application et que vous ne pouvez pas simplement déplacer le modal vers l’extérieur car il ira à l’encontre de la structure de conception.

déplacez simplement votre modal en dehors de tout contenu div, placez-le principalement avant la fermeture du corps.

Pour ceux qui utilisent ASP.NET MVC ,

Besoin de déplacer le div modal juste avant la mais ne peut pas le faire parce que vous utilisez une page Layout

Définissez une section dans votre fichier _Layout.cshtml juste avant la balise body, par exemple:

 ... some html in layout page ... @RenderSection("bottomHTML", required: false)   

Alors à votre avis

 @section bottomHTML { 
 ... rest of the modal div HTML ... } 

De cette façon, le HTML modal sera rendu avant que la balise body et le modal ne soient maintenant affichés correctement.

J’ai eu un problème similaire, le fondu ne fonctionnait pas et la superposition restait sur la page. J’ai ajouté du contenu dynamic à la page (actualisation de certains contenus uniquement sur l’action modale). J’avais aussi ce $ (‘# rejectModal -‘ + itemId) .modal (‘hide’) (itemId est un identifiant dynamic pour les modaux multi-pages dans une seule page pour rejeter certaines informations) mais le problème n’était toujours pas résolu.

La superposition restait parce que ma mise en page n’était pas définie sur null dans la vue partielle.

 @{ Layout = null; } 

Assurez-vous d’abord que le modal ne se trouve dans aucun div parent. Puis ajoutez $ (‘# myModal’). AppendTo (“body”)

Ça a bien marché pour moi.

En plus de toutes les réponses ici, j’ai découvert que le bootstrap4 “fadeIn animé” provoquait également cette erreur (pas de modal cliquable derrière l’arrière-plan):

vérifiez si votre modal est dans la balise parent suivante (animation bootstrap)

J’ai supprimé cette étiquette – résolu le problème pour moi.

Si vous utilisez JQuery, vous pouvez utiliser appendTo () pour append le modal à un élément spécifique, dans ce cas, la plupart du temps, une simple ligne peut déplacer votre modal sur le fond, quelle que soit la position de votre div modal.

 $("#myModal").appendTo("body"); 

voici la référence de la fonction JQuery appendTo: http://api.jquery.com/appendto/

Je l’ai mis à jour à votre violon http://jsfiddle.net/ZBQ8U/240/

cela fonctionne pour moi.

 
 
 
 
 Please select recovery delivery option Email Text 
 
  

 var element = $('#modalDecision'); // also taken from bootstrap 3 docs $(element).on('shown.bs.modal', function (e) { // keep in mind this only works as long as Bootstrap only supports 1 modal at a time, which is the case in Bootstrap 3 so far... var backDrop = $("
"); $(element).append($(backDrop)); }); 

J’ai rencontré ce problème et après avoir étudié mon css, le conteneur principal (enfant direct du corps) avait:

 position: relative z-index: 1 

la canvas de fond a bien fonctionné après que j’ai retiré ces deux propriétés. Vous pouvez également rencontrer ce problème si l’enveloppe principale a une position: fixed