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?

Its hard to isolate the specific issue without a targetted code example, a working fiddle shows us little- as it doesnt allow the problem to be identified. Choose a non working theme, provide the least code needed to replicate it, and maybe provide an example of that. Without it, it could be anything :S — SW4, Dec 04 '14 at 08:10

score 0 · Accepted Answer · answered Dec 04 '14 at 08:01

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/

score 0 · Answer 2 · answered Apr 09 '22 at 14:13

0

Add This into style tag

.modal {
     background: rgba(255, 255, 255, 0.8);
}
.modal-backdrop {
     display: none;
}1200;

answered Apr 09 '22 at 14:13

Akshay Kashyap

47
1

If you have a new question, please ask it by clicking the [Ask Question](https://stackoverflow.com/questions/ask) button. Include a link to this question if it helps provide context. - [From Review](/review/late-answers/31496874) – Ethan Apr 12 '22 at 01:17

Bootstrap modal freezes page

2 Answers2