double background on modals #679

BrianTheCoder opened this Issue Nov 23, 2011 · 17 comments

I copied the code from the bootstrap site, but when I click the link to launch the modal, it generates two backgrounds (i.e. one click generates two divs with the modal-backdrop class

Bootstrap member

Have a jsfiddle to show an example?

Bootstrap member

nope - impossible

@fat fat closed this Dec 25, 2011

I had a similar issue, in my case I was mistakenly setting my modal's backdrop to true in my javascript every time it was shown. Make sure this is only done once.


This can appear to happen in Rails if you accidentally misconfigure things so that you have two copies of your assets, such as javascript and css files. See

I had two modal background divs going down, it was nuts!

The problem brought me here first, and then finally to the stackoverflow link above which fixed my problem.


I think it was something to do with the asset pipeline. It can bite you in the ass


I had this exact issue, and here's an explanation of what caused it.

I made an AJAX call, and wanted to $(response).modal() the html response. In theory, this would work fine, but I was getting the double-backdrop. After some exploration, I realized that there was a script in the AJAX content, which caused the jQuery selector to have two elements in it: [div.modal, script]. Having two elements in the selector caused the two backdrops.


I came here from Google with the same issue (search term "twitter bootstrap modal two backdrops"), I was doing the exact same things as @landons and his comment was very helpful. In my case, only a single DOM root element was returned from the ajax call (a <div class="modal"> with a form inside), but the presence of this exact code within the div and form tag caused the double backdrop problem:



So to me, this still seems like a bug. Hope this helps someone else.


Like @landons, I use $(response_html).modal() in an AJAX call, and the response is:

<div class="modal hide">

The html comment caused the second backdrop.
So, I use $(response_html).filter('.modal').modal().


Thanks to @landons and @dishuostec - your comments and the .filter('.modal') solution helped me a lot!


Ah! Thanks @dishuostec. I removed my <!-- end .modal --> comment and the double background problem went away.


I imagine your fine so long as you don't like to mark-up your tag soup with a comment at the end like above examples.

If you do, your going to need to use: .filter('.modal')


@dsjoerg You are totally right, I just remove the public/assets folder and all the problems gone! Thanks.


Removed the 'modal ends' comment and ran rake assets:clean, the 2 backdrops problem went away. Thanks @dishuostec!


I got same issue and searched on Google, and here I come.

However the reason of my issue is different, I include both bootstrap.js and bootstrap.min.js in same time, and use data attributes, data-toggle="modal", to define overlay window.

Apparently both bootstrap.js and bootstrap.min.js handle the event trigger.

Hope this can help someone as careless as me


Had the same issue and thanks to @landons I found the problem to be jQuery's $.parseHTML() function.


The function will return a list/array of DOM nodes and modal() will be called on each one of them. A work around could be to use $.trim() instead of $.parseHTML().


I was going crazy with this issue then found this and comment of @landons and @dishuostec solved my problem. Just needed to remove <!--/.modal--> comments. Thanks guys!


I had the same error, and the comments here helped me. The double background happened because of a malformed html markup, so check your html markup for this problem.

@hnrch02 hnrch02 locked and limited conversation to collaborators Sep 29, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.