web-dev-qa-db-fra.com

Bootstrap Modal apparaît mais a une page "teintée" et ne peut pas interagir

J'utilise bootstrap pour configurer un popup modal. Quand un bouton est cliqué, la boîte de dialogue modale s'ouvre, mais la page entière est légèrement "teintée" et je ne peux pas interagir avec le modal (la page se fige essentiellement). Savez-vous pourquoi cela serait? Voici le code:

bouton:

<a class="add-list-button-no-margin opener" id="id" data-toggle="modal" href="#myModal" style="color: white; font:14px / 14px 'DINMedium','Helvetica Neue',Helvetica,Arial,sans-serif;">Play my city</a>

modal:

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Congratulations!</h4>
          </div>
          <div class="modal-body">
            <h4>Text in a modal</h4>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

            <h4>Popover in a modal</h4>
            <p>This <a href="#" role="button" class="btn btn-default popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>

            <h4>Tooltips in a modal</h4>
            <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>

            <hr>

            <h4>Overflowing text to show optional scrollbar</h4>
            <p>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 -->

MODIFIER:

Voici les fichiers inclus:

<link media="all" type="text/css" rel="stylesheet" href="http://crowdtest.dev:8888/assets/CSS/style.css">
<link media="all" type="text/css" rel="stylesheet" href="http://crowdtest.dev:8888/assets/CSS/jquery-ui-1.10.1.custom.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">

<link media="all" type="text/css" rel="stylesheet" href="http://crowdtest.dev:8888/assets/CSS/bootstrap.css">

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script src="http://crowdtest.dev:8888/assets/js/script.js"></script>
<script src="http://crowdtest.dev:8888/assets/js/jquery-ui-1.10.1.custom.min.js"></script>

<script src="http://crowdtest.dev:8888/assets/js/bootstrap.js"></script>

EDIT: arrive dans tous les navigateurs essayés (Chrome, Firefox, Safari)

twitter-bootstrapmodal-dialog
24
user1072337

Ok, alors j'ai compris le problème. 

Si le conteneur modal a une position fixe ou est dans un élément avec une position fixe, ce problème se produira.

Le moyen le plus simple consiste simplement à déplacer le div modal afin qu’il soit en dehors de tout élément avec un positionnement spécial. Un bon endroit pourrait être juste avant la balise de fermeture du corps.

C'est ce que j'ai fait et cela a fonctionné. 

50
user1072337

Cela m'est arrivé et il a fallu des siècles pour diagnostiquer. Si cela vous arrive, ajoutez ceci à votre css:

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

EDIT: Vous aurez peut-être besoin de plus de précision pour que ce paramètre soit pris en compte. Comme le suggère Nick Spoon, vous pouvez utiliser

body.modal-open div.modal-backdrop { 
    z-index: 0; 
}

Et vous devrez peut-être ajouter plus de qualificateurs, en fonction de ce que le reste de votre CSS fait. Vous pouvez également utiliser !important, mais cela ne fait que balayer le problème sous le tapis.

26
Rob Lyndon

J'ai trouvé une bonne solution à ce problème ici:

https://stackoverflow.com/a/18764086

Ajoutez -webkit-transform: translateZ (0) à la position: élément fixe. Cela force Chrome à utiliser l'accélération matérielle pour peindre en continu l'élément fixe et éviter ce comportement étrange.

3
Miguel Pereira

Si vous souhaitez ouvrir la boîte de dialogue d'impression sur le bouton présent sur le modal lui-même et après l'impression, votre page Web n'est pas accessible, elle fonctionnera certainement pour vous .__ plutôt que la fonction window.print().

Utilisez le code ci-dessous . Tout d’abord, vous devez fermer la boîte de dialogue modale et l’ouvrir après quelques secondes.

setTimeout(function() { printnow('printdiv', 10); }, 500);
1
nrajsharma794

Si vous utilisez ASP.NET, assurez-vous de placer le bloc div du modal dans un <asp:Content ContentPlaceHolderID="BottomOfForm" runat="server">.

0
Simon Morgan

J'ai également rencontré ce problème et constaté que ce phénomène se produisait lorsque l'écran était gelé après avoir cliqué sur le bouton permettant d'ouvrir un modal et que cela était dû à un non-verrouillé que j'avais accidentellement supprimé.

Quand j'ai ajouté la fermeture, le Popup Modal a recommencé à fonctionner.

0
jroyce

J'ai résolu ce problème en déplaçant tout le code HTML modal vers le bas de mon fichier! Rien d'autre n'a fonctionné. Seul le bouton pour ouvrir le modal est dans le reste du code HTML. Cela pourrait avoir quelque chose à voir avec les déclarations de balises body, mais je n'ai pas le temps de m'en soucier.

0
FayeB