CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmodal-dialog
David Perry
David Perry

Reputation: 1364

Bootstrap Modals misbehaving

I'm trying to add a BootStrap modal to an already-existing page and I'm running into the following problem:

The modal displays exactly as I would expect it to, content in place looking quite beautiful but I have two problems. If I specify only class="modal" the modal displays by default when the page loads and will not close. If I include class="modal hide" then the modal does not display at page load but also doesn't close when the appropriate buttons are clicked.

I'm not making any big departures from the modals sample code on the Bootstrap site, any ideas what's going wrong?

Here's the button that's supposed to launch the modal:

<a class="btn" data-toggle="modal" href="#testmodal" >About</a>

And here's the modal itself:

    <div class="modal hide fade in" id="testmodal">
        <div class="modal-header">
            <button class="close" data-dismiss="modal">x</button>
            <h3>Modal Header</h3>
        </div>
        <div class="modal-body">
            <p>body</p>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn">Close</a>
        </div>
    </div>

And for the record, yes I did remember to include bootstrap-modal.js and bootstrap-transition.js

Upvotes: 1

Views: 590

Answers (2)

Geoffrey De Vylder
Geoffrey De Vylder

Reputation: 4143

Glad your problem is resolved.

Also if you want the default bootstrap functionality without customizing anything just use the big download button on the main page. This zip file contains a default bootstrap.min.js file that includes all the plugins (like the modal dialogs etc). If you use that one instead of all the seperate javascript files your page has to make less requests and load faster.

Upvotes: 1

assaqqaf
assaqqaf

Reputation: 1585

your close link should be like this:

<a class="close" data-dismiss="modal">×</a>

since, data-dismiss is a custom HTML5 data attribute. Here it is used to close the modal window.

Upvotes: 0

Related Questions