Overview
I am trying to create a jQuery UI Dialog with an opacity of around .75. While I have achieved this, the issue is that the opacity is also applied to the entire dialog, including its content.
My goal is to control the opacity of the dialog independently from its core and content. I want the title bar and content to have a different opacity level than the overall dialog.
The dialog needs to appear over a background image that I want users to partially see through at an opacity of .75. However, when the opacity is set to .75, the text within the dialog becomes harder to read as it also gets the same opacity, making it look gray instead of black.
Previous Searches Conducted
I have searched using various keywords to find a solution for my desired outcome. However, most results focus on changing the overlay color of a modal dialog, which is not what I need.
Here are some of the search results I have found so far:
- jQuery: Set modal dialog overlay color
- Darker background in Jquery UI dialog
- jquery-ui-dialog.css (source)
- jquery blankout / grayout the page where dialog box is showing
- How to change background color of jQuery UI Dialog?
While I have been able to change the background color of the dialog, working with a transparent background almost achieves what I want. However, certain phrases become hard to read due to the background image of my site. I do not want a completely transparent background, but rather a white one with some transparency provided by the opacity setting. Unfortunately, when set to .75, everything in the .dialog or .ui-dialog classes appears grayish, which is not the desired effect.
CSS Styles
.dialog {
box-shadow: 0 4px 4px 0 #888;
}
.dialog .ui-dialog-titlebar {
background: rgb(74, 159, 63);
color: white;
}
.ui-dialog {
border: 1px solid rgb(74, 159, 63);
border-bottom: 0px;
color: #333;
font: 18px/120% Arial, Helvetica, sans-serif;
opacity: .75;
}
.ui-dialog-content {
opacity: 100;
}
Javascript Code
$(document).ready(function() {
var corporationKey = 0;
var servicesKey = 1;
var fadeEffectDuration = 500;
var dialogWidth = 1000;
var dialogs = new Array("#CorporationDialog", "#ServicesDialog");
$(dialogs[corporationKey]).dialog({
autoOpen: false,
closeOnEscape: true,
dialogClass: 'dialog',
hide: {
effect: "fade",
duration: fadeEffectDuration
},
resizable: true,
show: {
effect: "fade",
duration: fadeEffectDuration
},
width: dialogWidth
});
$(dialogs[servicesKey]).dialog({
autoOpen: false,
closeOnEscape: true,
dialogClass: 'dialog',
hide: {
effect: "fade",
duration: fadeEffectDuration
},
resizable: true,
show: {
effect: "fade",
duration: fadeEffectDuration
},
width: dialogWidth
});
// Function to open Enterprise dialog
$("#CorporationMenu").click(function() {
closePreviouslyOpenedDialogs(dialogs);
openDialog(dialogs[corporationKey]);
return false;
});
// Function to open Services dialog
$("#ServicesMenu").click(function() {
closePreviouslyOpenedDialogs(dialogs);
openDialog(dialogs[servicesKey]);
return false;
});
$("#accordion").accordion({ active: false, collapsible: true, heightStyle: "content" });
});
function closePreviouslyOpenedDialogs(dialogs) {
for (var i=0;i<dialogs.length;i++) {
closeDialog(dialogs[i]);
}
}
function closeDialog(key) {
$(key).dialog( "close" );
}
function openDialog(key) {
$(key).dialog( "open" );
}
HTML Structure Example
<div id="CorporationDialog" title="Enterprise">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Inquiry
Is there a way to prevent the text in a dialog from appearing grayish when the dialog's opacity is set to .75?
Thank you all!
Solution Update
Following the recommendation from Richard A., the solution involves:
Photoshop Steps
- Create a new image with a transparent background using Photoshop or any similar software
- In Photoshop, add a new layer and fill it with white using the Paint Bucket tool
- Adjust the opacity setting located above the layers as needed
- Save the image for Web and Devices
- When saving, select PNG-24 instead of GIF format
- Ensure the Transparency checkbox is checked before saving
CSS Modification
.ui-dialog {
background-image: url('path/to/my/dialog-background-translucent.png') !important;
background-repeat: repeat;
background: transparent;
/* Additional settings here */
}
Note the use of !important for the background-image property, which makes a significant difference!
Et voilà!