Adding a dark background around a popup div using jquery

[Biology Forums]

Here's the HTML

Code Select Expand

<div id="pm_popup" class="windowbg">
<h5 class="catbg">
<span style="float: right; padding-top: 2px;">
<a href="javascript:;" onclick="closefPmPopup()">
<img src="', $settings['images_url'], '/close_button_gray.png" alt="', $txt['pm_popup_close'], '" />
</a>
</span>';

if($context['user']['unread_messages'] == 1)
echo '',$txt['pm_popup'],'';
else
echo'You have ',$context['user']['unread_messages'],' new personal messages';

echo'</h5>
<p>
<div>
You have received one or more new personal messages.
</div>
<div style="font-weight: bold; padding-bottom: 2ex; padding-top: 0.5ex;" class="midtext">
View them now (in a new window)?
</div>
<div>
<span class="midtext logreg" style="font-weight: bold;">
<a href="', $scripturl, '?action=pm" target="_blank" onclick="closefPmPopup()">
<img style="padding-right: 1ex; vertical-align: bottom;" src="', $settings['images_url'], '/icons/green_tick.png" alt="" />Yes
</a>
&nbsp;&nbsp;&nbsp;
<a href="javascript:;" onclick="closefPmPopup()">
<img style="padding-right: 1ex; vertical-align: bottom;" src="', $settings['images_url'], '/icons/red_tick.png" alt="" />Later
</a>
</span>
</div>
</p>
</div>';

And here's the Script behind it.

Code Select Expand

<script language="JavaScript" type="text/javascript">
$(function() {
document.getElementById("pm_popup").style.display = \'block\';
})
function closefPmPopup()
{
document.getElementById("pm_popup").style.display = \'none\';
}
</script>

I would like everything but the popup to darken with an transparent black. Could someone tell me how this can be done?

It currently looks like this...