Bootstrap modal apparaissant sous arrière-plan

Si le modal conteneur a un fixe ou de la position relative ou au sein d'un élément fixe ou par rapport à la position de ce problème va se produire.

Assurez-vous que le modal conteneur et tous ses éléments parents sont positionnés par défaut façon de résoudre le problème.

Ici sont un couple de façons de le faire:

1. Plus simple est de simplement déplacer le modal div c'est donc en dehors de tout éléments spéciaux de positionnement. Un bon endroit peut-être juste avant la balise de fermeture body </body>.
2. Alternativement, vous pouvez supprimer position: propriétés CSS à partir du modal et de ses ancêtres jusqu'à ce que le problème disparaît. Cela pourrait changer l'apparence de la page et les fonctions, cependant.

J'ai essayé toutes les options fournies ci-dessus, mais ne pas le faire fonctionner à l'aide de ceux-ci.

Ce n'travail: réglage de la z-index de l' .modale de toile de fond à -1.

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

J'ai également rencontré ce problème et aucune des solutions n'a fonctionné pour moi jusqu'à ce que j'ai compris en fait, je ne pas besoin d'une toile de fond. Vous pouvez facilement retirer la toile de 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>

Note: le data-backdrop attribut doit être défini à false (d'autres options: static ou true).

Fournies par la Solution de @Muhd est la meilleure façon de le faire. Mais si vous êtes coincé dans une situation où l'évolution de 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">&times;</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>

L'astuce ici est data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" en supprimant le défaut de toile de fond et de créer un mannequin, un par réglage de la couleur d'arrière-plan de la boîte de dialogue elle-même avec quelques alpha.

Mise à jour 1:
Comme l'a souligné @Gustyn qu'en cliquant sur l'arrière-plan n'est pas de fermer la boîte de dialogue comme c'est prévu. Donc, pour réaliser que vous avez à ajouter un peu de code java script. Voici quelques exemples de comment vous pouvez atteindre cet objectif.

$('.modal').click(function(event){
    $(event.target).modal('hide');
});

Une autre manière d'aborder cette question consiste à enlever le z-index à partir de la .modal-backdrop dans le bootstrap.css. Ce sera la cause de la toile de fond pour être au même niveau que le reste de votre corps (il sera toujours fade) et votre modal pour être au top.

.modal-backdrop ressemble à ceci

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}

J'ai tout simplement mis:

#myModal {
    z-index: 1500;
}

et ça fonctionne....

Pour la question d'origine:

.my-module {
    z-index: 1500;
}

Salut j'ai eu le même problème, puis je me rends compte que lorsque vous utilisez bootsrap 3.1
Contrairement à des versions plus anciennes de bootsrap (2.3.2)
la structure html de la modale a été changé!

, vous devez emballer votre modal corps d'en-tête et pied de page avec modale de dialogue et de 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>

L'utiliser dans vos modal:

data-backdrop="false" 

définir le z-index .modal à une valeur plus grande

Par exemple,
.sidebarwrapper a z-index de 1100, avec le z-index de .modal 1101

.modal {
    z-index: 1101;
}

Dans mon cas le résoudre, ajouter ceci dans ma feuille de style:

CSS:

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

avec google débogueur, peut examiner l'élément de FOND Et de modifier les attributs. Goog luck.

dans votre barre de navigation navbar-fixed-top besoin z-index = 1041
et aussi, si u utilisation bootstarp-combined.min.css également le changement .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

Vous pouvez également supprimer le z-index .modal-toile de fond. Résultant css devrait ressembler à ceci.

.modal-backdrop {
}
  .modal-backdrop.in {
    opacity: .35;
    filter: alpha(opacity=35); }

ce que je trouve est que:

dans le bootstrap 3.3.0 il n'est pas juste,mais quand dans le bootstrap 3.3.5 c'est bon.nous allons 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)

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

Dans mon cas, la cause était de bootstrap.min.css 🙂 une fois que j'ai exclu la forme de mon fichier html comme une référence, le dialogue a montré dans forn de la modale de l'ombre 🙂

Cela a fonctionné pour moi:

sass: 
  .modal-backdrop
    display: none
  #yourModal.modal.fade.in
    background: rgba(0, 0, 0, 0.5)

essayer d'écraser la classe .modal-ouvert de dépassement de la valeur de caché visible.

.modal-open {
    overflow: visible;
}

Ce comportement se produit parfois lorsqu'il y a une balise non fermée, plus particulièrement un unclosed </div>. Vous pouvez revoir l'endroit où votre modal est situé et s'assurer que toutes les balises sont bien fermées ou mieux encore déplacer le div modal plus près du bas de la page, imediately avant </body> tag boîtier

J'ai eu le même problème et également de vérifier Muhd de réponse.

Mais, mon modal besoins à gauche, en haut de l'attribut, il suffit donc de changer de position fixe à l'absolu et cela a fonctionné.

.modal {
    position: absolute;
}

J'ai eu un problème de ce genre sur Iphone et Ipad à l'aide de Sharepoint 2013
Modal bootstrap garder z-index de problèmes avec en toile de fond.

Je viens de l'utiliser sur JS :

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);
}); 

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);
}

Essayer ce code 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:

JS:

    $(window).on('load', function() {
      
/* Latest compiled and minified JavaScript included as External Resource */
$(document).ready(function() { $('.modal').modal("show"); });

    });

CSS:

/* 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:

<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 trouvé que par l'ajout d'une ligne de style de la balise pour définir "display: none" empêché ce problème. La position du code n'a eu aucun effet.

Supprimer modal-toile de fond qui est noir dans votre bootstrap CSS

Voir la mienne:

.modal-backdrop {
position: fixed; /*---- commented and it shows */
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
/*background-color: #000000; */
}

puis ajoutez le fond de la couleur et de l'opacité de l'o.5. voir la mienne:

.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1030; 
background-color: rgba(0, 0, 0, 0.5);
opacity: 0.5;

}

REMARQUE: Bien que ces changements ont été faits dans le css de bootstrap, j'ai utilisé angulaires-sangle et je n'ai pas télécharger ou utiliser le ng-animer css