Few days ago I was working on UI for one of my projects. I needed to create a pop up dialog with semi opaque background around it, something like Facebook has.  Since my CSS skills are not too powerful, I turned to Google to look for a tutorial(s).

Many resources that I have found, make use of images when creating semi transparent background around dialogs. I did not want to do that, I wanted to make use of pure CSS. It did take me quite a few hours to find what I wanted to do.

Finally, after reading a number of tutorials on the Internet, I have came up with a solution that did what I wanted.

The following is a screen shot of my pop-up using Firefox:

Firefox - dialog with semi opaque background using pure CSS

The following is a screen shot of my pop-up using Internet Explorer:

Internet Explorer - dialog with semi opaque background using pure CSS

The following is a code snippet from a test page that I did. Its an example of HTML structure of DIVs that create the popup. The CSS styles are located in the head section of the test page. jQuery is also included (it adds some minor effects, plus its centers the popup in the middle of the screen). Its pretty straight forward, so just download, unzip and run it. I have tested the popup in Firefox, IE6,IE7, Safari (Win) and Google Chrome, so I can say it works fine in all major browsers.

<div id="dialog-box-parent-container">
	<div id="dialog-box-transparent-background" class="opacity-70 box-round-all-8px"></div>
	<div id="dialog-box-header" class="box-round-top-4px">
		<h2 class="box-round-top-4px">
			<span class="dialog-box-header-content">Action Completed</span>
		</h2>
	</div>
	<div id="dialog-box-content" class="box-round-bottom-4px">
		<div id="dialog-box-text">blah blah blah</div>
		<div class="dialog-box-buttonpane">
			<a class="dialog-box-button">Okay</a>
		</div>
	</div>
</div>

I hope this example provides you enough information how to create modal popup dialog using pure CSS. The source code is attached: jquery modal dialog with semi-opaque border

Please let me know if you have any questions,

Cheers