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
Reblogged this on 14 Emerton.
LikeLike