New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

double background on modals #679

Closed
BrianTheCoder opened this Issue Nov 23, 2011 · 17 comments

Comments

Projects
None yet
@BrianTheCoder

BrianTheCoder commented Nov 23, 2011

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

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Nov 28, 2011

Member

Have a jsfiddle to show an example?

Member

mdo commented Nov 28, 2011

Have a jsfiddle to show an example?

@fat

This comment has been minimized.

Show comment
Hide comment
@fat

fat Dec 25, 2011

Member

nope - impossible

Member

fat commented Dec 25, 2011

nope - impossible

@fat fat closed this Dec 25, 2011

@spung

This comment has been minimized.

Show comment
Hide comment
@spung

spung Jan 1, 2012

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.

spung commented Jan 1, 2012

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 comment has been minimized.

Show comment
Hide comment
@dsjoerg

dsjoerg Feb 21, 2012

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.

dsjoerg commented Feb 21, 2012

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

This comment has been minimized.

Show comment
Hide comment
@BrianTheCoder

BrianTheCoder Feb 23, 2012

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

BrianTheCoder commented Feb 23, 2012

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

@landons

This comment has been minimized.

Show comment
Hide comment
@landons

landons Mar 21, 2012

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.

landons commented Mar 21, 2012

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

This comment has been minimized.

Show comment
Hide comment
@wesley-murch

wesley-murch Jun 15, 2012

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.

wesley-murch commented Jun 15, 2012

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

This comment has been minimized.

Show comment
Hide comment
@dishuostec

dishuostec Jun 27, 2012

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

dishuostec commented Jun 27, 2012

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

This comment has been minimized.

Show comment
Hide comment
@visor1999

visor1999 Aug 12, 2012

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

visor1999 commented Aug 12, 2012

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

@needcaffeine

This comment has been minimized.

Show comment
Hide comment
@needcaffeine

needcaffeine Sep 3, 2012

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

needcaffeine commented Sep 3, 2012

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

@Dreyer

This comment has been minimized.

Show comment
Hide comment
@Dreyer

Dreyer Oct 26, 2012

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

Dreyer commented Oct 26, 2012

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

This comment has been minimized.

Show comment
Hide comment
@victorhazbunanuff

victorhazbunanuff Mar 31, 2013

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

victorhazbunanuff commented Mar 31, 2013

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

@vishu17

This comment has been minimized.

Show comment
Hide comment
@vishu17

vishu17 Apr 2, 2013

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

vishu17 commented Apr 2, 2013

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

@becoder

This comment has been minimized.

Show comment
Hide comment
@becoder

becoder May 13, 2013

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

becoder commented May 13, 2013

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

This comment has been minimized.

Show comment
Hide comment
@bigwhoop

bigwhoop Jun 27, 2013

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

bigwhoop commented Jun 27, 2013

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

This comment has been minimized.

Show comment
Hide comment
@PrimozRome

PrimozRome Jan 10, 2014

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!

PrimozRome commented Jan 10, 2014

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

This comment has been minimized.

Show comment
Hide comment
@eloone

eloone Sep 29, 2014

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.

eloone commented Sep 29, 2014

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.

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