CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmodal-dialog
Vinc 웃
Vinc 웃

Reputation: 1257

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 !

Upvotes: 1

Views: 16521

Answers (2)

Harsha Nayanajith A.G.
Harsha Nayanajith A.G.

Reputation: 176

I know this is way too late for the answer, but in case someone else looking for a solution,

Standard div structure of bootstrap model popup is as below.

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal title goes here</h4>
            </div>
            <div class="modal-body">
                Some text to popup
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

In this case you missed "modal-dialog" and "modal-content" classes. If required replace the div id "myModal".

Hope this helps.

Upvotes: 2

amamut
amamut

Reputation: 311

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/

Upvotes: 2

Related Questions