Bootstrap modal apparaissant sous l'arrière-plan
J'ai utilisé le code pour mon modal directement à partir de l'exemple Bootstrap, et n'ai inclus que le fichier bootstrap.js (et non bootstrap-modal.js). Cependant, mon modal apparaît sous le fondu gris et n'est pas éditable.
Voici à quoi ça ressemble:
Voir ce violon pour une manière de reproduire ce problème. La structure de base de ce code est la suivante:
<body>
<p>Lorem ipsum dolor sit amet.</p>
<div class="my-module">
This container contains the modal code.
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">Modal</div>
</div>
</div>
</div>
</div>
</body>
body {
padding-top: 50px;
}
.my-module {
position: fixed;
top: 0;
left: 0;
}
Des idées pourquoi c'est ou ce que je peux faire pour résoudre ce problème?
Si le conteneur modal a une position fixe ou relative ou se trouve dans un élément avec une position fixe ou relative, ce problème se produira.
Assurez-vous que le conteneur modal et tous ses éléments parents sont positionnés par défaut pour résoudre le problème.
Voici quelques façons de le faire:
- Le moyen le plus simple consiste simplement à déplacer le div modal afin qu’il se trouve en dehors de tout élément avec un positionnement spécial. Un bon endroit pourrait être juste avant la balise de fermeture du corps
</body>. - Vous pouvez également supprimer les propriétés
position:CSS du modal et de ses ancêtres jusqu'à ce que le problème disparaisse. Cela pourrait toutefois changer l'apparence et les fonctions de la page.
Le problème concerne le positionnement des conteneurs parents. Vous pouvez facilement "sortir" votre modal de ces conteneurs avant de l'afficher. Voici comment faire si vous utilisiez show votre modal avec js:
$('#myModal').appendTo("body").modal('show');
Ou, si vous lancez modal à l'aide de boutons, supprimez le .modal('show'); et faites simplement:
$('#myModal').appendTo("body")
Cela conservera toutes les fonctionnalités normales, vous permettant d’afficher le modal à l’aide d’un bouton.
J'ai essayé toutes les options fournies ci-dessus mais je n'ai pas réussi à les utiliser.
Qu'est-ce qui a fonctionné: en fixant l'index z du fond .modal à -1.
.modal-backdrop {
z-index: -1;
}
Assurez-vous également que la version de BootStrap css et js sont les mêmes. Différentes versions peuvent également faire apparaître modal sous l’arrière-plan:
Par exemple:
Mauvais:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
Bien:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
J'ai également rencontré ce problème et aucune des solutions n'a fonctionné pour moi jusqu'à ce que je sache que je n'ai en fait pas besoin de toile de fond. Vous pouvez facilement supprimer le fond avec le code suivant.
<div class="modal fade" id="createModal" data-backdrop="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Create Project</h4>
</div>
<div class="modal-body">Not yet made</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Remarque : l'attribut data-backdrop doit être défini sur false ( autres options : static ou true).
Je l'ai obtenu en donnant une valeur z-index élevée à la fenêtre modale APRÈS en l'ouvrant. Par exemple.:
$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");
La solution fournie par @Muhd est la meilleure façon de le faire. Mais si vous êtes coincé dans une situation où changer la structure de la page n'est pas une option, utilisez cette astuce:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
Le truc ici est data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" en supprimant le fond par défaut et en créant un modèle factice en définissant la couleur de fond du dialogue lui-même avec un alpha.
Mise à jour 1: Comme l'a souligné @Gustyn, le fait de cliquer sur l'arrière-plan ne ferme pas la boîte de dialogue comme prévu. Donc, pour cela, vous devez ajouter du code de script Java. Voici quelques exemples pour y parvenir.
$('.modal').click(function(event){
$(event.target).modal('hide');
});
Un peu tard, mais voici une solution générique -
var checkeventcount = 1,prevTarget;
$('.modal').on('show.bs.modal', function (e) {
if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
{
prevTarget = e.target;
checkeventcount++;
e.preventDefault();
$(e.target).appendTo('body').modal('show');
}
else if(e.target==prevTarget && checkeventcount==2)
{
checkeventcount--;
}
});
Visitez ce lien - Bootstrap 3 - le modal disparaît sous le fond lorsque vous utilisez une barre latérale fixe pour plus de détails.
Ajoutez simplement deux lignes de CSS:
.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}
Le .modal-backdrop doit avoir une valeur de 1050 pour le définir sur la barre de navigation.
Une autre façon de procéder consiste à supprimer l'index z du .modal-backdrop dans le fichier bootstrap.css. Cela fera en sorte que la toile de fond soit au même niveau que le reste de votre corps (elle s'effacera toujours) et que votre modal soit au top.
.modal-backdrop ressemble à ceci
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000000;
}
J'ai simplement réglé:
#myModal {
z-index: 1500;
}
et il fonctionne....
Pour la question initiale:
.my-module {
z-index: 1500;
}
Ce problème peut souvent être rencontré lorsqu’on utilise des éléments tels que les dégradés en CSS pour des éléments tels que les arrière-plans ou même les en-têtes en accordéon.
Malheureusement, modifier ou redéfinir le noyau Bootstrap CSS n'est pas souhaitable et peut entraîner des effets secondaires indésirables. La méthode la moins intrusive consiste à ajouter data-backdrop="false", mais vous remarquerez peut-être que l’effet de fondu ne fonctionne plus comme prévu.
Après avoir suivi les dernières versions de Bootstrap, la version 3.3.5 semble résoudre ce problème sans effets secondaires indésirables.
Téléchargement: https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.Zip
Assurez-vous d'inclure les fichiers CSS et les fichiers JavaScript à partir de 3.3.5.
J'ai eu ce problème et le moyen le plus simple de le résoudre était addind z-index supérieur à 1040 sur la div modal-dialog:
<div class="modal-dialog" style="z-index: 1100;">
Je crois que bootstrap crée un fondu de fond modal dans lequel, dans mon cas, a l'indice z 1040, donc si vous placez la boîte de dialogue modale par-dessus, elle ne devrait plus être grisée.
Cela couvrirait tous les modaux sans déranger les animations ni le comportement attendu.
$(document).on('show.bs.modal', '.modal', function () {
$(this).appendTo('body');
});
Bonjour, j'ai eu le même problème, alors je me suis rendu compte que lorsque vous utilisiez bootsrap 3.1, contrairement à l'ancienne version de bootsrap (2.3.2), la structure html du modal a été modifiée!
vous devez envelopper votre corps d'en-tête modal et votre pied de page avec modal-dialog et modal-content
<div class="modal hide fade">
<div class="modal-dialog">
<div class="modal-content">
**here goes the modal header body and footer**
</div>
</div>
</div>
Dans mon cas, résolvez-le, ajoutez ceci dans ma feuille de style:
.modal-backdrop{
z-index:0;
}avec google debugger, peut examiner l’élément BACKDROP et modifier les attributs. Bonne chance.
J'ai une solution plus légère et meilleure ..
Cela pourrait être facilement résolu grâce à quelques styles CSS supplémentaires ..
cacher la classe
.modal-backdrop(généré automatiquement à partir de Bootstrap.js).modal-backdrop { display:none; visibility:hidden; position:relative }définissez l’arrière-plan de
.modalsur une image de fond noir translucide..modal { background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png") // translucent image from google images z-index:1100; }
Cela fonctionnera mieux si vous avez une exigence qui nécessite que le modal soit à l'intérieur d'un élément et non à proximité de la balise </body>.
Utilisez ceci dans votre modal:
data-backdrop="false"
définir le z-index .modal sur une valeur maximale
Par exemple, .sidebarwrapper a un indice z égal à 1100; définissez donc l'indice z de .modal sur 1101
.modal {
z-index: 1101;
}
aucune des solutions suggérées ci-dessus n'a fonctionné pour moi, mais cette technique a résolu le problème:
$('#myModal').on('shown.bs.modal', function() {
//To relate the z-index make sure backdrop and modal are siblings
$(this).before($('.modal-backdrop'));
//Now set z-index of modal greater than backdrop
$(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
J'ai été corrigé en ajoutant le style ci-dessous à la balise DIV
style="background-color: rgba(0, 0, 0, 0.5);"
Et ajouter des css personnalisés
.modal-backdrop {position: relative;}
$('.modal').insertAfter($('body'));
Changez la position absolue en relatif.
.modal-backdrop {
position: relative;
/* ... */
}
J'ai enlevé la toile de fond modale.
.modal-backdrop {
display:none;
}
Ce n'est pas une meilleure solution, mais cela fonctionne pour moi.
dans votre barre de navigation navbar-fixed-top besoin de z-index = 1041 et aussi si vous utilisez bootstarp-combined.min.css le changement également .navbar-fixed-top, .navbar-fixed-bottomz-index to 1041
Vous pouvez également supprimer l'index z de .modal-backdrop. Les css résultants ressemblent à ceci.
.modal-backdrop {
}
.modal-backdrop.in {
opacity: .35;
filter: alpha(opacity=35); }
ce que je trouve est que:
dans bootstrap 3.3.0, ce n'est pas correct, mais lorsque dans bootstrap 3.3.5, il est correct. Voir le code. 3.3.0:
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.prependTo(this.$element)
3.3.5
this.$backdrop = $(document.createElement('div'))
.addClass('modal-backdrop ' + animate)
.appendTo(this.$body)
Dans mon cas, j'avais un wrapper avec ce qui suit:
.wrapper { margin: 0 auto; position:relative; z-index:1;overflow:hidden;}
Seulement supprimé le z-index: 1 et je ne sais pas pourquoi résolu le problème. aussi, bien sûr, enlever la position relative a fait mais j'en avais besoin.
Cela a fonctionné pour moi:
sass:
.modal-backdrop
display: none
#yourModal.modal.fade.in
background: rgba(0, 0, 0, 0.5)
Dans mon cas, la cause était bootstrap.min.css :) une fois que je l'ai exclu de mon fichier html comme référence, la boîte de dialogue affichée sous la forme de la nuance modale :)
Ajouter celui-ci à vos pages. Ça marche pour moi.
<script type="text/javascript">
$('.modal').parent().on('show.bs.modal', function (e) { $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
</script>
Pour moi, la solution la plus simple était de placer mon modal dans un wrapper avec une position absolue et un indice z supérieurs à .modal-backdrop. Depuis modal-backdrop (du moins dans mon cas) a l'indice z 1050:
.my-modal-wrapper {
position: absolute;
z-index: 1060;
}<div class="my-modal-wrapper"></div>essayez de remplacer la valeur de dépassement de la classe .modal-open de masquée à visible.
.modal-open {
overflow: visible;
}
Essayez ceci https://github.com/nakupanda/bootstrap3-dialog/releases/tag/v1.34.
Bootstrap Modal 3.3.0 génère le fond modal à l'intérieur de l'élément principal, alors qu'il était auparavant ajouté à l'élément body.
J'espère que cela t'aides.
Comme Davide Lorigliola, je l'ai corrigé en augmentant l'indice z: .modal-backdrop {z-index: -999999; }
Malheureusement S.O. m'interdit de commenter ou de voter sur le sien, alors je suis obligé de le dire ici-bas dans une autre solution.
J'ai eu le même problème et aussi vérifier la réponse de Muhd.
Mais, mes besoins modaux sont à gauche, attribut supérieur, il suffit donc de changer la position fixe en absolu et cela a fonctionné.
.modal {
position: absolute;
}
Ce problème se produit parfois lorsqu'il existe une balise non fermée, en particulier un </div> non fermé. Vous pouvez vérifier où se trouve votre modal et vous assurer que toutes les balises sont correctement fermées ou, mieux, tout en rapprochant le mod de div du bas de la page, immédiatement avant la balise </body>.
Essayez ce code en CSS.
.modal-open { overflow: hidden !important; }
.modal-open *{ position:unset; z-index: 0; }
.modal-open .modal-backdrop { position: fixed; z-index: 99998 !important; }
.modal-open .modal { position: fixed; z-index: 99999 !important; }
Ex:
$(window).on('load', function() {
/* Latest compiled and minified JavaScript included as External Resource */
$(document).ready(function() { $('.modal').modal("show"); });
});/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
padding-top: 50px;
}
.my-module {
position: fixed;
top: 0;
left: 0;
border: 1px solid red;
}
.modal-open { overflow: hidden !important; }
.modal-open *{ position:unset; z-index: 0; }
.modal-open .modal-backdrop { position: fixed; z-index: 99998 !important; }
.modal-open .modal { position: fixed; z-index: 99999 !important; }<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Bootstrap 3 Template</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//code.jquery.com/jquery-compat-git.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body class="modal-open">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et augue sed lorem laoreet vehicula sit amet eget tortor. Donec in turpis gravida, commodo mauris ac, gravida neque. Proin eget tristique lorem. Integer tincidunt sem sit amet metus ultricies, vitae placerat dui gravida. Pellentesque viverra, nunc imperdiet egestas imperdiet, magna massa varius arcu, vitae iaculis tortor quam vitae arcu. Fusce posuere non lectus vel cursus. In rutrum sed dui non sollicitudin. Proin ante magna, imperdiet ac nisl ut, rhoncus pellentesque tortor.</p>
<p>Cras ac velit vitae elit tempus tempus. Nullam eu posuere leo. In posuere, tortor et cursus ultrices, lorem lacus efficitur dolor, a aliquet elit urna sed tortor. Donec dignissim ante ex, non congue ex efficitur sit amet. Suspendisse lacinia tristique odio, vel sagittis dui tempor tempus. Quisque gravida mauris metus, sed aliquam lacus sollicitudin sit amet. Pellentesque laoreet facilisis scelerisque. Nunc a pulvinar magna. Maecenas at mollis tortor.</p>
<p>Vivamus ultricies, odio sed ornare maximus, libero justo dignissim nulla, nec pharetra neque nulla vel leo. Donec imperdiet sem sem, eu interdum justo tincidunt finibus. Vestibulum lacinia diam gravida risus luctus, elementum blandit dui porttitor. Quisque varius lacus et tempor faucibus. Nam eros nunc, gravida eu tellus eget, placerat porta leo. Duis tempus ultricies felis sit amet cursus. Nunc egestas ex non lacus laoreet tincidunt. Sed malesuada placerat elementum. Mauris eu rutrum nulla. Nunc consequat lacus eget libero tincidunt, in semper eros accumsan. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse eu tincidunt quam, ut tincidunt eros. Donec luctus velit ac nulla lacinia malesuada.</p>
<p>Vestibulum id mi in urna lacinia mollis. Pellentesque sit amet mauris ullamcorper, suscipit dolor in, lacinia leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Vivamus sollicitudin tempus massa sed molestie. Nullam quis neque vel nunc convallis porta a laoreet ex. Aliquam tempus hendrerit turpis eleifend convallis. Cras enim eros, fermentum sed velit eget, dignissim malesuada augue. Fusce ut fermentum nisl, vel imperdiet libero. Etiam luctus arcu volutpat turpis finibus pulvinar eget in augue. Integer sapien nisi, scelerisque ultrices quam sit amet, aliquam placerat neque. Morbi consequat porttitor lacus, quis pulvinar dolor aliquam ut. Ut et dolor id est iaculis lobortis nec aliquet nisl.</p>
<p>Nunc et tortor cursus, ullamcorper justo vitae, ullamcorper sapien. In fringilla urna quam, et finibus ipsum finibus eu. In fermentum turpis ut eros semper, non gravida purus ornare. Praesent vehicula lobortis lacinia. Vivamus nec elit libero. Suspendisse porta neque ut erat tempor rhoncus. Nunc quis massa in ante rhoncus bibendum. Nam maximus ex vitae orci luctus scelerisque. Sed id mauris iaculis, scelerisque mauris feugiat, vehicula ipsum. Duis semper erat ac nulla sodales gravida. Suspendisse nec sapien pharetra, scelerisque odio in, dignissim erat. Aenean feugiat sagittis eros, in mattis orci tristique lacinia. Phasellus posuere id neque sed mattis. Morbi accumsan faucibus ullamcorper.</p>
<div class="my-module">
This is a container for "my-module" with some fixed position. The module contains the modal code.
<div class="modal fade in" aria-hidden="false" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</div>
</body></html>J'ai simplement supprimé la position: style fixe du fichier _modal.scss et cela semble bien fonctionner pour moi. J'ai toujours le fond et cela fonctionne comme prévu.
// Modal background
.modal-backdrop {
/* commented out position: fixed - bug fix */
//position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-modal-backdrop;
background-color: $modal-backdrop-bg;
// Fade for backdrop
&.fade {
opacity: 0;
}
Félicitations à Rick Strahl pour les conseils: https://weblog.west-wind.com/posts/2016/Sep/14/Bootstrap-Modal-Dialog-showing-under-Modal-Background
Selon les réponses précédentes, cela pourrait se produire pour plusieurs raisons. Le problème était de référencer deux liens Bootstrap différents sans le savoir, alors supprimer l'un d'eux résout le problème.
dans mon cas, j'ai inclus celui-ci:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
et un autre hors ligne que j'ai déjà dans mon ordinateur portable.
function addclassName(){
setTimeout(function(){
var c = document.querySelectorAll(".modal-backdrop");
for (var i = 0; i < c.length; i++) {
c[i].style.zIndex = 1040 + i * 20 ;
}
var d = document.querySelectorAll(".modal.fade");
for(var i = 0; i<d.length; i++){
d[i].style.zIndex = 1050 + i * 20;
}
}, 10);
}
Vous pouvez faire une solution de contournement, mais cela supprimera le fondu de toute la page. le modal apparaîtra comme fb popups. Après avoir ouvert le modal, essayez
$('.modal-backdrop').removeClass('modal-backdrop');
J'ai eu un problème comme celui-ci sur Iphone et Ipad avec Sharepoint 2013 Modal bootstrap. J'ai des problèmes d'index z en fond.
Je viens d'utiliser ceci sur JS:
$('#myModal').on('shown.bs.modal', function() {
//To relate the z-index make sure backdrop and modal are siblings
$(this).before($('.modal-backdrop'));
//Now set z-index of modal greater than backdrop
$(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
}); J'ai eu le même problème que pour les appareils iOS.
La solution a été en supprimant -webkit-overflow-scrolling: touch du parent element