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.
A:
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
Just a heads up, look at where that file's hosted...it may not be an option :)
Nick Craver
2010-07-08 01:04:52
uh, heh, host the file yourself then?
2010-07-08 01:05:54
+2
A:
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/
sunetos
2010-07-08 01:09:45
+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: http://jsfiddle.net/QVXah/
Nick Craver
2010-07-08 01:11:50
That is a really handy site! I'm going to try to remember to use that next time.
sunetos
2010-07-08 01:18:01
@sunetos - 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 :)
Reigel
2010-07-08 01:20:02
@Reigel - He says *exactly* where :) Line 48 in the page's in-line `<style>` block :)
Nick Craver
2010-07-08 01:30:08