Bootstrap Modal assis derrière la toile de fond

bien que l'index-z du .modal soit plus élevé que celui du .modal-backdrop , que .modal est dans un div parent #content-wrap qui a un index-z inférieur à .modal-backdrop (index-z: 1002 vs index-z: 1030).

parce que le parent a un indice z plus bas que le .modal-backdrop tout en elle sera derrière le modal, indépendamment de n'importe quel indice z donné aux enfants.

si vous supprimez le z-index vous avez mis sur les deux body div#fullContainer #content-wrap et aussi sur le #ctrlNavPanel , tout semble ok.

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 utilisé initialement z-indexes sur le #content-wrap et #ctrlNavPanel pour s'assurer que le nav se trouve derrière, mais ce n'est pas nécessaire parce que l'élément nav vient avant le content-wrap dans le HTML, donc vous n'avez besoin de les positionner, pas explicitement définir un ordre d'empilage.

modifier Comme Schmalzy l'a remarqué, les liens ne sont plus cliquables. C'est parce que le full-container est 100% large et couvre donc la navigation. La façon la plus rapide de corriger ceci est de placer la navigation à l'intérieur de 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>

DÉMO ICI

dans mon cas, je pourrais le corriger en ajoutant css pour le .modal-backdrop

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

bien que cela fonctionne, les contrôles de forme semblent toujours apparaître au-dessus de la toile de fond, en cliquant n'importe où rejette le modal, mais il ne semble pas grand.

une meilleure solution pour moi est de me lier à l'événement affiché (une fois la page chargée) et de 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 indiqué:

$('.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 fonctionnait assez bien pour moi. Le problème semble se situer là où les fenêtres modales doivent être à l'extérieur du corps.et ce n'est pas mieux

donc ce code a fait le travail juste avant:

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

$('#product_' + product_id + ' .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 ici est animation-fill-mode: both; . Je ne pouvais pas simplement déplacer modal à l'extérieur, donc la solution était de 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, ce qui est le plus optimal, si quelqu'un me le dit, je 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 la toile de fond, si vous n'en avez pas vraiment besoin (data-background= "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>

une autre solution pour ce problème est d'ajouter z-index: 0; à .classe modal-backdrop dans votre dialogue bootstrap.fichier css si vous ne voulez pas modifier bootstrap.CSS.

si nous ne pouvons pas supprimer la toile de fond et / ou si nous avons un cadre de composants tel que l'angle ou la vue nous ne pouvons pas déplacer modal à la racine. j'ai fait cette astuce: mettre mon conteneur modal-background personnalisé (avec classe aditionnelle) comme frère pour conteneur de dialogue modal et a 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}

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 ,

besoin de déplacer le div modal juste avant la balise </body> mais ne peut pas le faire parce que vous utilisez un Layout page

définir une section en vous _Layout.cshtml fichier juste avant l'étiquette de corps, 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 le corps tag et le modal devrait maintenant s'afficher correctement..

il suffit de supprimer z-index: 1040 ;

de ce fichier bootstrap.css classe .modal-backdrop

il me manquait le html suivant

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

ajouté et travaillé sans problèmes

puisque je n'ai pas la chance de déplacer le markup modal puisque je l'ai ajouté dans un gabarit partiel dans un conditionnel ce qui a fonctionné pour moi est ajouter CSS bellow

.modal.fade {
    display: none;
}

puis, lorsque boostrap ajouter classe "dans" par js appliquer affichage: bloc et tout fonctionne très bien.

j'ai Trouvé que l'application ionic framework (ionique.min.cs) après bootstrap parcourant ce numéro pour moi.

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

ainsi disant Vous avez votre structure de site web:

//not working
<div>
    <div>
        <div>
            <modal></modal>
        </div>
    </div>
</div>

ouvrez votre inspecteur de code et déplacez le modal à la racine, il devrait fonctionner (mais pas où vous voulez):

//should be working
<div>
    <div>
        <div>

        </div>
    </div>
</div>
<modal></modal>

maintenant, mettez-la dans la première div et vérifiez si elle fonctionne: si oui, vérifiez l'enfant suivant jusqu'à ce qu'elle 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 div 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, mettre 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 toile de fond vient au-dessus de votre ID modal est que le parent a n'importe quel ensemble de position.

une façon très simple de résoudre le problème autre que de déplacer votre modal à l'extérieur est de déplacer la toile de fond à l'intérieur de la structure où vous avez votre modal. Dans votre cas, ça pourrait être

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

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

il suffit de déplacer votre modal en dehors de tous les contenus div, le placer la plupart du temps avant la fermeture du corps.

j'ai eu un problème similaire que le fondu ne fonctionnait pas et la superposition est restée sur la page. J'ai ajouté du contenu dynamique à la page (rafraîchir sur certains contenus uniquement sur l'action modale). J'ai aussi eu ce $('#rejtmodal-'+itemId).modal ("masquer") (itemId est l'id dynamique pour les modaux multi-modèles dans une seule page pour rejeter certaines informations) mais le problème n'était pas encore parti.

la superposition restait parce que ma disposition n'était pas réglée à null dans la vue partielle Après le problème a disparu:

@{ 
    Layout = null;
}

assurez-vous D'abord que le modal n'est dans aucun div parent. Puis Ajouter $('#myModal').appendice ("corps")

ça a bien marché pour moi.

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 balise résolu le problème pour moi.

si vous utilisez JQuery, vous pouvez utiliser l'appendice() pour ajouter le modal à un élément spécifique, dans ce cas, le, dans la plupart des cas, une simple ligne peut déplacer votre modal sur le dessus de la toile de fond indépendamment de la position de votre div modal""

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

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

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

ça me va.

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

j'ai rencontré ce problème, et après enquête de mon css, le principal conteneur (enfant direct du corps) avait:

position: relative
z-index: 1

la toile de fond a bien fonctionné après que j'ai enlevé ces deux propriétés. Vous pouvez également rencontrer ce problème si le principal wraper ont un position: fixed