Vinc 웃 Vinc 웃 - 2 months ago 16
CSS Question

Bootstrap Modal work but it won't display properly

I really need your help. I am trying to use the bootstrap modal. It took me 3-4 h to make it work. Given that I use a template, it seems the bootstrap javascript was being rewritten. I found a way to make it work.

But now, the problem is the model is being displayed without style at all :

Before :

Before

After :

enter image description here

I really need your help, Im stuck here and I really don't know how to solve that. The bootstrap.css look to work for all the sheet, so im not sure if this is the problem.

Here how I call the modal :

<div class="modal-backdrop fade in" ></div>
<div class="modal hide fade in" id="myModal" style="display: none;">
<div class="modal-header">
<a class="close" href="#">×</a>
<h3>Modal Heading</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a class="btn primary" href="#">Primary</a>
<a class="btn secondary" href="#">Secondary</a>
</div>
</div>

<div class="bs-docs-example" style="padding-bottom: 24px;">
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large" data-backdrop="static" >Launch demo modal</a>
</div>


Thank you for your help !

Answer

Check this out: http://jsfiddle.net/nAUSm/

<!--<div class="modal-backdrop fade in"  ></div>-->
   <div class="modal hide fade in" id="myModal" style="display: none;">
       <div class="modal-header">
           <a class="close" href="#">×</a>
           <h3>Modal Heading</h3>
       </div>
       <div class="modal-body">
            <p>One fine body…</p>
       </div>
       <div class="modal-footer">
           <a class="btn primary" href="#">Primary</a>
           <a class="btn secondary" href="#">Secondary</a>
       </div>
    </div>

<div class="bs-docs-example" style="padding-bottom: 24px;">
       <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large" data-backdrop="static" >Launch demo modal</a>
</div>

I got it to work by commenting out the first div. I am not sure what it was there for.

Edit: The close button isn't working either so I fixed it here: http://jsfiddle.net/nAUSm/1/

Comments