2013-10-04 49 views
10

Ich verwende Bootstrap-Modal. Die triggrer ist wie folgt:Bootstrap Modal wird nicht angezeigt. Nur Hintergrund wird schwarz

<a id="add-feed-button" role="button" data-toggle="modal" href="#add-feed-form" class="btn pull-right btn-success" style="margin-left:5px; margin-top:-4px;">Add new</a> 

und mein modal:

<div id="add-feed-form" class="form-feed modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
this is modal. 
</div> 

Problem ist, dass nur der Hintergrund schwarz wird aber nicht modal angezeigt wird.

Ich habe bootstrap.js und auch bootstrap.min.css enthalten. Ich habe modals ziemlich oft verwendet, aber das ist ein seltsames Problem.

Antwort

21

Remove .hide Klasse von div#add-feed-form und dann wird es gut funktionieren.

Demo

+1

Eine Frage, die ich habe ist, warum benötigt nicht die 'hide' Klasse ist, wenn die ** [Bootstrap docs] (http://getbootstrap.com/2.3.2/javascript.html#modals) ** implizieren es sollte da sein? – vogomatix

+1

, weil die Versteckklasse bereits in den Bootstrap-Dokumenten erwähnt wird. wodurch es sich dadurch verstecken kann. –

+0

@vogomatix, weil die Klasse 'hide' im Bootstrap 2.X verwendet und im Bootstrap 3.X entfernt wird. Ich denke, dass der Benutzer versucht, den 2.X-Code auf 3.X zu portieren, so dass das Problem mit .hide auftritt. Ich hoffe es hilft ! ;) – uday

Verwandte Themen