Bootstrap Modal assis derrière la toile de fond
J'ai donc presque exactement le même problème que @Jamescoo étais, mais je pense que mon problème vient du fait que j'ai déjà placé plusieurs DIV pour créer un panneau de navigation coulissant.
Voici ma configuration exacte répliquée: http://jsfiddle.net/ZBQ8U/2/
BONUS: N'hésitez pas à saisir le code du panneau coulissant si vous le souhaitez :)
Les z-index ne devraient pas entrer en conflit et leurs valeurs montreraient qu'ils s'empilent correctement, mais visuellement, ils ne le sont pas.
Une fois que vous avez cliqué sur le bouton 'Open Modal', le <div class="modal-backdrop fade in"></div> couvre tout! (vous devrez réexécuter le code pour le réinitialiser)
Je ne sais pas trop comment remédier à ça ... Des idées?
Déplacez tout le modal en dehors du reste de votre code, tout en bas. Il n'a pas besoin d'être imbriqué dans un autre élément, autre que le corps.
<body>
<!-- All other HTML -->
<div>
...
</div>
<!-- Modal -->
<div class="modal fade" id="myModal">
...
</div>
</body>
Ils font allusion à cette solution dans la documentation.
Emplacement du marquage modal
Essayez toujours de placer le code HTML d'un modal au plus haut niveau de votre document pour éviter les autres composants affectant l'apparence et/ou la fonctionnalité du modal.
Bien que l’indice z du .modal soit supérieur à celui du .modal-backdrop, ce .modal est dans un div parent #content-wrap qui a un indice z inférieur à .modal-backdrop (index z: 1002 vs index z: 1030).
Parce que le parent a un indice z inférieur à celui de .modal-backdrop, tout se trouve derrière le modal, quel que soit l'indice z attribué aux enfants.
Si vous supprimez le z-index que vous avez défini à la fois sur le body div#fullContainer #content-wrap et 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;
}
REMARQUE: je pense que vous avez peut-être initialement utilisé les index z sur les éléments # content-wrap et #ctrlNavPanel pour garantir que le nav est laissé derrière, mais ce n'est pas nécessaire, car l'élément nav vient avant le content-wrap besoin de les positionner, pas explicitement définir un ordre d'empilement.
EDIT Comme Schmalzy l'a noté, les liens ne sont plus cliquables. En effet, le conteneur complet est 100% large et couvre donc la navigation. Le moyen le plus rapide de résoudre ce problème consiste à placer la navigation dans cette div:
<div id="fullContainer">
<aside id="ctrlNavPanel">
<ul class="nav-link-list">
<li><label>Menu</label></li>
<li><a href="/"><span class="fa fa-lg fa-home"></span> Home</a></li>
<li><a><span class="fa fa-lg fa-group"></span>About Us</a></li>
<li><a><span class="fa fa-lg fa-book"></span> Contacts</a></li>
</ul>
</aside>
<div id="content-wrap">
...
</div>
</div>
Dans mon cas, je pourrais le réparer en ajoutant css pour le .modal-backdrop
.modal-backdrop {
z-index: -1;
}
Bien que cela fonctionne, les contrôles de formulaire semblent toujours apparaître au-dessus de la toile de fond, cliquer n'importe où pour supprimer le modal, mais cela n'a pas l'air génial.
Une solution plus efficace pour moi consiste à établir une liaison avec 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 voulez changer le DOM sur le modal affiché:
$('.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);
});
Dans mon cas, un des parents de mon modal était animé et avait ceci
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
z-index: 100;
}
Le bloqueur ici est animation-fill-mode: both;. Je ne pouvais pas simplement déplacer le modal à l'extérieur. La solution consistait donc à remplacer «animation-fill-mode» par animation-fill-mode: none;. L'animation fonctionnait toujours bien.
Je me battais avec le même problème certains jours ... J'ai trouvé trois solutions possibles, mais je ne sais pas, qui est la meilleure, si quelqu'un me le dit, je vous 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.
Essayez de supprimer le fond, si vous n'en avez pas vraiment besoin (data-backdrop = "false"):
<div class="modal fade" data-backdrop="false" role="dialog" id="my-modal" aria-labelledby="modal-title">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">No Backdrop</h3>
</div>
<div class="modal-body">
<p>
Look! No backdrop here!
</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Cancel</button>
<button class="btn btn-primary">Ok</button> </div>
</div>
</div>
</div>
Vous pouvez utiliser ceci:
<div
class="modal fade stick-up disable-scroll"
id="filtersModal"
tabindex="-1"
role="dialog"
aria-labelledby="filtersModal"
aria-hidden="false"
style="background-color: rgba(0, 0, 0, 0.5);" data-backdrop="false"
>
....
</div>
Adding style="" and data-backdrop false would fix it.
Pour ceux qui utilisent ASP.NET MVC ,
Vous devez déplacer le div modal juste avant la balise </body>, mais vous ne pouvez pas le faire car vous utilisez un Layout page
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)
</body>
</html>
Alors à votre avis
@section bottomHTML
{
<div class="modal fade" id="myModalID" role="dialog" tabindex="-1" aria-labelledby="demo-default-modal" aria-hidden="true">
... rest of the modal div HTML ...
}
De cette façon, le HTML modal sera rendu avant la balise body et le modal doit maintenant être affiché correctement.
Une autre solution à ce problème consiste à ajouter z-index: 0; à la classe .modal-backdrop dans votre fichier bootstrap-dialog.css si vous ne souhaitez pas modifier le fichier bootstrap.css.
si nous ne pouvons pas supprimer la toile de fond et/ou si nous avons un composant tel que l'angle ou la vue, nous ne pouvons pas nous déplacer de manière modale vers la racine. J'ai fait cette astuce: mettre mon conteneur personnalisé modal-backdrop (avec classe additionnelle) en tant que frère pour conteneur conteneur-modal et ajouté quelques css
<div bsModal #moneyModal="bs-modal" class="modal fade" tabindex="-1" role="dialog">
<!-- magic container-->
<div class="modal-holder modal-backdrop" (click)="moneyModal.hide()"></div>
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-body">
....
</div>
</div>
</div>
</div>
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}
Si vous ne pouvez pas mettre le modal à la racine (si vous utilisez angular et que le modal est dans un contrôleur par exemple), modifier bootstrap ou utiliser js est évidemment une solution bad .
en disant que vous avez la structure de votre site web:
//not working
<div>
<div>
<div>
<modal></modal>
</div>
</div>
</div>
ouvrez votre inspecteur de code et déplacez le modal vers la racine, cela devrait fonctionner (mais pas où vous voulez):
//should be working
<div>
<div>
<div>
</div>
</div>
</div>
<modal></modal>
maintenant, mettez-le dans la première div et vérifiez si cela fonctionne: si oui, vérifiez le prochain enfant jusqu'à ce que cela ne fonctionne pas et trouvez la div qui est le problème;
//should be working
<div>
<div>
<div>
</div>
</div>
<modal></modal>
</div>
Une fois que vous savez quelle est le problème, 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 sur display: table; était la solution
Plusieurs fois, vous ne pouvez pas déplacer le modal à l'extérieur car cela affecterait votre structure de conception.
La raison pour laquelle l'arrière-plan se situe au-dessus de votre modal est id si le parent a n'importe quel jeu de positions.
Un moyen très simple de résoudre le problème, à l’exception du déplacement de votre modal à l’extérieur, consiste à déplacer le fond de la structure à l’intérieur de la structure où 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 à l'extérieur car il irait à l'encontre de la structure de conception.
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);
});
J'avais un problème similaire: le fondu ne fonctionnait pas et la superposition restait sur la page . J'ai ajouté du contenu dynamique à la page (actualisez certains contenus uniquement sur l'action modale) . ('#rejectModal -' + itemId) .modal ('hide') (itemId est l'identifiant dynamique de plusieurs modaux d'une page pour rejeter certaines informations), mais le problème n'était toujours pas résolu.
La superposition restait, car ma mise en page n'était pas définie sur null dans la vue partielle Après avoir défini cette option, le problème avait disparu:
@{
Layout = null;
}
cela fonctionne pour moi.
<div class="modal fade" id="modalDecision" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body text-center">
<asp:Label runat="server" Height="30px">Please select recovery delivery option</asp:Label>
<asp:LinkButton ID="btnEmail" CssClass="submit btn btn-primary" Width="100px" runat="server"
OnClick="ModalRecovery">Email</asp:LinkButton>
<asp:LinkButton ID="btnText" CssClass="submit btn btn-primary" Width="100px" runat="server"
OnClick="ModalRecovery">Text</asp:LinkButton>
</div>
</div>
</div>
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 = $("<div class='modal-backdrop' style='z-index:-1;opacity:.5'></div>");
$(element).append($(backDrop));
});
Tout d’abord, assurez-vous que le modal n’est dans aucune division parent . Ajoutez ensuite $ ('# MyModal'). AppendTo ("body")
Cela a bien fonctionné pour moi.
Il me manquait le suivi html
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
l'a ajouté et a travaillé sans problèmes
Si vous utilisez JQuery, vous pouvez utiliser appendTo () pour ajouter le modal à un élément spécifique. Dans ce cas, la simple, dans la plupart des cas, une seule ligne peut déplacer votre modal au-dessus de l'arrière-plan, peu importe la position de votre div modal.
$("#myModal").appendTo("body");
voici la référence de la fonction appendTo de JQuery: http://api.jquery.com/appendto/
Je l'ai mis à jour à votre violon http://jsfiddle.net/ZBQ8U/240/
J'ai constaté que l'application d'un cadre ionique (ionic.main.css) après le bootstrap était à l'origine de ce problème.
Depuis que je n'ai pas la chance de déplacer le balisage modal depuis que je l'ai ajouté dans un modèle partiel au sein d'une condition, ce qui a fonctionné pour moi est d'ajouter CSS ci-dessous
.modal.fade {
display: none;
}
Ensuite, lorsque boostrap ajoute la classe "in" à travers js, applique display: block et tout fonctionne correctement.
déplacez simplement votre modal en dehors de tout contenu div, placez-le surtout avant la fermeture du corps.
j'ai rencontré ce problème, et après avoir étudié mes CSS, le conteneur principal (enfant direct du corps) avait:
position: relative
z-index: 1
la toile de fond a bien fonctionné après avoir retiré ces deux propriétés. Vous pouvez également rencontrer ce problème si l’enveloppe principale a un position: fixed
il suffit de supprimer z-index: 1040;
à partir de ce fichier bootstrap.css classe .modal-backdrop
En plus de toutes les réponses ici, j'ai découvert que le bootstrap4 "fadeIn animé" est aussi la cause de cette erreur (modal non cliquable derrière le fond):
vérifiez si votre modal est dans la balise parent suivante (animation bootstrap)
<div class="animated fadeIn"></div>
J'ai enlevé cette étiquette - résolu le problème pour moi.
Je me méfie de déplacer le contenu modal en dehors de son contexte d'origine: d'autres styles ou styles JS peuvent dépendre de ce contexte.
Cependant, je doute que certains scripts ou styles nécessitent un contexte spécifique pour le fond.
Ma solution consiste donc à déplacer le fond adjacent au contenu modal, en le forçant dans le même contexte d'empilement:
$(document).on('shown.bs.modal', '.modal', function () {
$('.modal-backdrop').before($(this));
});
Ce n'est qu'une légère déviation de jacoswarts ' solution , alors merci pour l'inspiration!