JavaScript Forum

**Founding** · 10:52 AM

I'am building a pop up for a video ... what i did was hide a iframe inside a div am trying to get it to center in the middle of the page where the user currently is looking at but not having much luck ... can anyone tell me a good way to do this ...

this is what i have so far

HTML Code:

<script>
//0 means disabled; 1 means enabled;
var popupStatus = 0;
var currentDiv;

//loading popup with jQuery magic!
function loadPopup(mydiv){
	//loads popup only if it is disabled
	if(popupStatus==0){
		$("#backgroundPopup").css({
			"opacity": "0.5"
		});
		$("#backgroundPopup").fadeIn("slow");
		
		$("#close").fadeIn("slow");
		$(mydiv).fadeIn("slow");
		popupStatus = 1;
	}
}

//centering popup
function centerPopup(myDiv){
	//request data for centering
	
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $(myDiv).height();
	var popupWidth = $(myDiv).width();
	//centering
	$(myDiv).css({
		"position": "absolute",
		"top": 265,
		"marginLeft": "50%",
		"left": 510

		});
	//only need force for IE6
	
	$("#backgroundPopup").css({
		"height": windowHeight
	});
}
</script>

<script>

//disabling popup with jQuery magic!
function disablePopup(){
	//disables popup only if it is enabled
	if(popupStatus==1){
		$("#backgroundPopup").fadeOut("slow");
		 
		$(currentDiv).fadeOut("slow");
		$("#close").fadeOut("slow");
		popupStatus = 0;
		document.getElementById('tafFrame').src = "/ContentArchives/content-stories/Documents/newhopeVid.html";
	}
}

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
	
	//LOADING POPUP
	//Click the button event!
	
	$("#newhopeButton").click(function(){
		currentDiv = "#newhope";
		//$(currentDiv).load(""); 
		centerPopup(currentDiv);
		loadPopup(currentDiv);
	});
		
	//CLOSING POPUP
	//Click out event!
	$("#close").click(function(){
		disablePopup();
	});
	$("#backgroundPopup").click(function(){
		disablePopup();
	});
	//Press Escape event!
	$(document).keypress(function(e){
		if(e.keyCode==27 && popupStatus==1){
			disablePopup();
		}
	});

});

</script>


<!--Fiden iFrame -->
<div id="newhope">
<div id="close">Close</div>
<iframe src="/ContentArchives/content-stories/Documents/newhopeVid.html" width="750" height="1000" scrolling="no" frameborder="0" name="tafFrame" id="tafFrame"></iframe>
</div>