double background on modals #679

Closed
BrianTheCoder opened this Issue Nov 23, 2011 · 17 comments
@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
Bootstrap member

Have a jsfiddle to show an example?

@fat
Bootstrap member

nope - impossible

@fat fat closed this Dec 25, 2011
@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.

@wesley-murch

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 <!-- end .modal --> 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 <!--/.modal--> 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.

@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.