jQuery UI – Add background color on Dialog overlay

jQuery UI dialog is a simple way to create overlay/popup content in web development. Include jQuery UI and you could wrap the content in a overlay/popup using the following Javascript.

// Setup dialog
  autoOpen: false, // Do not open on page load
  modal: true // Freeze the background behind the overlay

// Open the dialog when sth is clicked
$('#click-me').click(function() {


And the following piece of CSS code set the opacity and color of the background color behind the overlay/popup.

.ui-widget-overlay {
  opacity: 0.5;
  filter: Alpha(Opacity=50);
  background-color: black;


Happy coding~

Done =)

Reference: StackOverflow – Darker background in Jquery UI dialog


One thought on “jQuery UI – Add background color on Dialog overlay”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.