Bootstrap modal freezes page

Question

I have searched the web for answers on this one with this question is closest to my own. Bootstrap Modal popping up but has a "tinted" page and can't interact

I am creating an admin page with bootstrap and i am using modals in there. The styling is done with Bootswatch themes. When using some themes, opening a modal, the modal appears in a tinted page and everything freezes. I have to refresh the page to get rid of it again.

I have tried to move the modal to the bottom of the page, just before the closing </body>
tag. Nothing works!

Strange thing is, that with the "Basic" bootstrap css, it has the same problem. There are some Bootswatch themes that work as they should, and some others give this problem.

I made and example in jsFiddle here: http://jsfiddle.net/qyo53dxh/ This one is with the "Paper" theme from bootswatch. When using i.e. "United" theme, it does work normal.

What is going on?

Solution

In your fiddle you are importing bootstrap.css and bootstrap.min.css?

Please remove bootstrap.css

And all is working nice.

<div class="modal fade forget-modal" tabindex="-1" role="dialog" aria-labelledby="myForgetModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                    <span class="sr-only">Sluiten</span>
                </button>
                <h4 class="modal-title">Wachtwoord resetten</h4>
            </div>
            <div class="modal-body">
                <p>Typ uw email adres</p>
                <input type="email" name="recovery-email" id="recovery-email" class="form-control" autocomplete="off">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Annuleren</button>
                <button type="button" class="btn btn-custom">Herstellen</button>
            </div>
        </div> <!-- /.modal-content -->
    </div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->

Here is working fiddle http://jsfiddle.net/qyo53dxh/1/