12

I have this extremely basic jQuery UI Modal Dialog that I wrote for testing here. Unless I am missing something I cannot figure out why their is that grey strip across the middle of the page. I am trying to manipulate the modal background color and opacity as well as seen in the CSS markup.

1
  • Do you control the script being inserted at the bottom of the page, outside the </html>? Jul 8, 2010 at 1:02

5 Answers 5

28

The problem is that the background defined by jQuery UI is not just a solid color: it's an image (to support patterns like stripes in the overlay). When you customize a jQuery UI theme with themeroller, it generates that colored image for you. To fix your page, all you need to do is edit the inline CSS in your page on line 48 from:

background-color: #000;

to:

background: #000;

This will override the entire background specification, not just the color.

UPDATE: Nick Craver provided a demo of the fix at http://jsfiddle.net/QVXah/

4
  • 4
    +1 - Was just about to post this, this is indeed the problem, here's a demo with the fix you want to include it in your answer: jsfiddle.net/QVXah Jul 8, 2010 at 1:11
  • That is a really handy site! I'm going to try to remember to use that next time.
    – sunetos
    Jul 8, 2010 at 1:18
  • I think it's better if you complete the answer.. I mean, where would you apply that background: #000; ? just for the passing by readers :) Jul 8, 2010 at 1:20
  • 2
    @Reigel - He says exactly where :) Line 48 in the page's in-line <style> block :) Jul 8, 2010 at 1:30
14

This question is over 3 years old, and the problem still persists in jQuery.

What worked for me was overriding the jQuery CSS class which defines background, by adding this in my own CSS file

.ui-widget-overlay {
  background: #000;
}

and loading my CSS after loading jQuery CSS. Now I don't see this annoying stipe and get a nice transparent light grey background.

You can also set

background: none;

But this will make it confusing for the user, because background will still be visible but not functional.

1
  • I am loading from CDN, so changing the file wasn't an option. This worked great!
    – Scottie
    Jun 13, 2014 at 22:00
1

My solution was a little different. Rather than changing the color of the background, I just made it transparent:

.ui-widget-overlay {
  opacity: 0;
}

As with other similar solutions, I put this in a .css file which is loaded after the jquery-ui.css that is loaded from code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css.

What I see now is just the popup, without any background side effects.

0

I have seen that problem before, and I am not sure why it has not been fixed. You should be able to fix it by removing line ~285 of jquery-ui.css from

.ui-widget-overlay {
    url("images/ui-bg_flat_0_aaaaaa_40x100.png") repeat-x scroll 50% 50% #AAAAAA
    ...
    }

See if that works for you

3
  • 1
    Just a heads up, look at where that file's hosted...it may not be an option :) Jul 8, 2010 at 1:04
  • uh, heh, host the file yourself then? Jul 8, 2010 at 1:05
  • I have this problem on some sites. My solution for this, (and other issues) is to load my css after jquery from //ajax.googleapis.com and override some of the styles. That way I can load from google apis but correct this stuff... Mar 9, 2014 at 22:10
0

If you are using a CDN and do not want to load/maintain another css, use the !important override:

.ui-widget-overlay {background: #BEBEBE !important;}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.