Friday, August 1, 2008

Blackout background javascript login form example

function display_login_form()
{
var login_width = 400;
var login_height = 250;

var body = document.getElementsByTagName("body")[0];

login_new_div = $('sajax_login_form');

if(!login_new_div) {
login_new_div = document.createElement('div');
body.appendChild(login_new_div);
login_new_div.id = 'sajax_login_form';
login_new_div.style.backgroundColor='#ffffff';
login_new_div.style.border='1px solid #800000';
login_new_div.style.position='absolute';

login_new_div.style.width = login_width + 'px';
login_new_div.style.height = login_height + 'px';
login_new_div.style.zIndex='100';
login_new_div.style.MozBorderRadius='10';
login_new_div.style.margin='auto';
login_new_div.style.left = (document.body.offsetWidth / 2) - (login_width / 2) + 'px';
login_new_div.style.right = (document.body.offsetWidth / 2) + (login_width / 2) + 'px';
login_new_div.style.top = (document.body.offsetHeight / 2) - (login_height / 2) + 'px';
login_new_div.style.bottom = (document.body.offsetHeight / 2) + (login_height / 2) + 'px';
}

login_new_div = $('sajax_login_form');

if(!login_new_div) {

blackout_new_div = document.createElement('div');
body.appendChild(blackout_new_div);
blackout_new_div.id = 'sajax_blackout';
blackout_new_div.style.position='absolute';
blackout_new_div.style.display='none';
blackout_new_div.style.left='0px';
blackout_new_div.style.top='0px';
blackout_new_div.style.backgroundColor='#555555';
blackout_new_div.style.opacity='.9';
blackout_new_div.style.filter='alpha(opacity=90)';
blackout_new_div.style.zIndex='50';
blackout_new_div.style.width='100%';
blackout_new_div.style.height=(document.body.offsetHeight < screen.height) ? screen.height+'px' : document.body.offsetHeight+20+'px';
blackout_new_div.style.height='100%';

login_new_div.innerHTML = 'Close';

// and finally display the divs
login_new_div.style.display='block';
blackout_new_div.style.display='block';
}

function hide_login_form()
{
var blackout = $('sajax_blackout');
var login = $('sajax_login_form');
login.style.display='none';
blackout.style.display='none';
}