Stackoverflow

Friday, August 12, 2011

Sticky Footer on Popup using javascript

There are many articles on the Internet about the sticky footer which can be implemented in a Html page. But i did not find any information about the sticky footer which can be implemented on a pop up window.

Here is how to that can be done.

create a javascript function that can be called on a event like onclick, onload etc.

function launchPopup(){
var width = 500; //Width of popup
var height = 400; //Height of popup

/* popup positioning based on height and width*/
var left = parseInt((screen.availWidth/2) - (width/2));
var top = parseInt((screen.availHeight/2) - (height/2));

var windowFeatures = "width=" + width + ",height=" + height + ",status=no,toolbar=no,resizable=no,scrollbars=yes,left=" + left + ",top=" + top + "screenX=" + left + ",screenY=" + top;

var actionURL = "Popup.jsp"; // Create a jsp or html file with the name
popWindow =window.open(actionURL,"", windowFeatures);
popWindow.document.write("<html>");
popWindow.document.write("<style type ='text/css'>");
popWindow.document.write(".containers { height : 340px;}");
popWindow.document.write("</style>");

popWindow.document.write("<body>");
popWindow.document.write("<div class = 'containers'>");
popWindow.document.write("// content for popup");
popWindow.document.write("</div>");
popWindow.document.write("<div align='center'>");
popWindow.document.write("//Footer Content Goes here");
popWindow.document.write("</div>");
popWindow.document.write("</body>");
popWindow.document.write("</html>");
popWindow.document.title="My Popup";

}