jQuery UI Modal Dialog Stripe Issue

Question

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.

Answer 1

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/

Answer 2

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.

Answer 3

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.