Le bootstrap modal de Twitter s'ouvre devant la forme
je suis avec un problème avec mon bootstrap modal Twitter: il s'ouvre devant mon formulaire. Je n'ai aucune idée de ce que j'ai fait, parce que ça marchait très bien il y a 3 jours. Je peux écrire sur le formulaire; je pense que le formulaire fonctionne. Le problème est l'ouverture modale devant le formulaire.
9 réponses
.modal-backdrop classe a z-index établi à 1040 et l' navbar-fixed-top l'indice z est fixé à 1030. Par conséquent, la toile de fond s'affiche sur le formulaire.
Remplacer .modal-backdrop valeur de l'index z dans votre fichier CSS en le définissant à une valeur inférieure à l'index z de navbar. Cela permettra de résoudre le problème.
j'avais des problèmes similaires. Je les ai adressés ici:http://jsfiddle.net/ATeaH/8/
une solution simple que Nielsen a mentionnée ci-dessus qui a fonctionné pour moi...
j'ai eu l' div - je fixer mon modal à l'intérieur la barre de navigation.
J'ai déplacé le div à l'extérieur du navbar - à juste sous le <body>
Problème résolu!
j'ai eu ce même problème. Dans mon cas, c'était dû à une div Non cachée dans ma tête.
je travaille avec AngularJS et j'ai rencontré le même problème. Pour clarifier, mon modal était dans un autre fichier HTML qui s'injecte Angular dans le DOM pendant l'exécution par ng-view. Ce qui a causé ce problème pour moi était que j'avais une classe d'animation css sur la div où était ma vue ng. À titre d'exemple:
<div ng-app="myApp">
<div class="pageTransition" ng-view></div> <!-- problem: class="pageTransition"-->
</div>
suppression de la classe css a réglé le problème et a rétabli mon modal en état de fonctionnement normal. Une solution à cet égard serait de remplacer la classe standard par Angular classe ng. De cette façon, vous pouvez dynamiquement ajouter, modifier ou supprimer une classe en utilisant le modal.
j'ai connu un problème similaire où un modal était inséré dans le DOM via AJAX. Sans rafraîchir la page, le modal est resté derrière un masque et était inaccessible.
$('body').append(....j render partial....);
j'ai essayé quelques parmi les autres suggestions que j'ai trouvées (comme peaufiner le z-index), mais cela n'a pas aidé dans mon cas.
Essayer cette solution, il a travaillé pour moi:
$('#myModal').appendTo("body").modal('show');
Ajouter les éléments suivants à votre CSS
.modal-dialog {
z-index: 1050;
}
si vous utilisez SASS vous pouvez faire ce qui suit à l'intérieur de _modals.scss:
.modal-dialog {
position: relative;
z-index: $zindex-modal-background; // copy-pasted z-index from .modal-backdrop
width: auto;
margin: 10px;
}