Home/ Questions/Q 8663293
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T16:57:07+00:00

I have a very simple HTML that should open a fading modal, but it

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0