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
Have a jsfiddle to show an example?
nope - impossible
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.