double background on modals

[BrianTheCoder]

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

[mdo]

Have a jsfiddle to show an example?

[fat]

nope - impossible

[spung]

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.

[dsjoerg]

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 http://stackoverflow.com/questions/8170039/ruby-on-rails-3-1-assets-pipeline-assets-rendered-twice

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.

[BrianTheCoder]

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

[landons]

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.

[ghost]

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:

<script>
$(document).ready(function(){

});
</script>

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

[dishuostec]

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

<div class="modal hide">
...
</div><!--/.modal-->

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

[visor1999]

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

[needcaffeine]

Ah! Thanks @dishuostec. I removed my comment and the double background problem went away.

[Dreyer]

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')

[victorhazbunanuff]

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

[vishu17]

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

[becoder]

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

[bigwhoop]

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

$($.parseHTML(html)).modal();

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().

[PrimozRome]

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

[eloone]

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.