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
$('#popup-content').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() {
  $('#popup-content').dialog('open');
});

 

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

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s