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