Jquery show hide problem

Hello,

I am having a problem when I hide a draggable div. The div is still there and you can not interact with anything on the page because the draggable div is still covering it up. I need to be careful moving it around because JS uses its location.

What did I do wrong?

The HTML


	<div id="boxPup" style="left:225px;top:75px;"><!--These in-line styles are needed for the dragStart JS function to get the initial location of the draggable div.-->
		<div class="bar" onmousedown="dragStart(event, 'boxPup')">Drag Box B</div>
		<div id="popUpDiv">
			<!-- The SWF is embedded here with showHidePup() using the div ID. -->
		</div>
	</div>

The JS


/* This function is called from the popup SWF on x-out */
function hidePup()
{
	$('#boxPup').hide();
}


/* This is the function that is called by the popup links. This displays the popup div and passes 2 variables to the SWF (pupUrl, pupTitle). */	
function showHidePup(pupUrl, pupTitle)
{
	$('#boxPup').show();
	var flashvars = {pUrl:pupUrl, popTitle: pupTitle};
	var params = {wmode:"transparent"};
	params.quality = "high";
	var attributes = {};
	swfobject.embedSWF("pop_up.swf", "popUpDiv", "700", "520", "9.0.0", false, flashvars, params);//, attributes
}