CODEWITHSUNDEEP
twitter-bootstrapmodal-dialogfade
Marcio Martins
Marcio Martins

Reputation: 340

Twitter Bootstrap Modal do not fade

I have a very simple HTML that should open a fading modal, but it only shows and hide without fading in or out.

Here is the code:

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="js/bootstrap-modal.js"></script>
    </head>
    <body>
        <div id="myModal" class="modal hide fade">
            <div class="modal-header"><h4>I'm a header</h4></div>
            <div class="modal-body"><p>Hello from the body</p></div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <button class="btn btn-primary">Save changes</button>
            </div>
        </div>

        <a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch Modal</a>
    </body>
</html>

This code was taken from Twitter Bootstrap docs.

In jsFiddle this simple code works just great! But if I save the above code like .html inside a folder with all required files (.css and .js), modal open in a simple way, without fading!

What am I doing wrong?

Thanks in advance.

Upvotes: 4

Views: 4617

Answers (3)

Sush
Sush

Reputation: 1

.modal.in .modal-dialog {-moz-transform: translate(0,0) !important;}

add this to your css

Upvotes: 0

Andres I Perez
Andres I Perez

Reputation: 75409

That is because the modal effects are CSS3 effects and you're not including the plugin that handles that, so just load the bootstrap-transition.js plugin before the modal plugin and it should work.

Upvotes: 7

Werner Kvalem Vester&#229;s
Werner Kvalem Vester&#229;s

Reputation: 10346

When using only bootstrap-modal.js, I experience the same as you. But it works when i use the compiled bootstrap.js

Upvotes: 1

Related Questions