[Script] Janela popup sobre o conteúdo do website

[marceloleaes]

Segue código para um popup completamente personalizável. Você pode utilizar para abrir uma página html ou php com conteúdo estático ou dinâmico caso desejar. No exemplo disponibilizei com uma imagem jpg, as possibilidades são muitas. Segue código:

Código: Selecionar todos

<script language="javascript">



function popup_div(nome_janela,largura_div,altura_div,conteudo,url)



{

	//var largura_div	=	270

	//var altura_div	=	230+25;

	altura_div	=	altura_div+25;

	document.write(unescape("%3Cstyle%3e"));

	document.write("#popup{position:absolute;top:50%;left:50%;background-color:#FFFFFF;border-left: #BBBBBB solid 2px;border-top: #BBBBBB solid 2px;border-right: #666666 solid 2px;border-bottom: #666666 solid 2px;display:block;");

	document.write("width:" + largura_div + "px;");

	document.write("height:" + altura_div + "px;");

	document.write("margin-left:-" + (largura_div/2) + "px;");

	document.write("margin-top:-" + (altura_div/2) + "px;}");

	document.write("#barra_popup{height:25px;width:100%;background-color:#DEDEDE;text-align:right;cursor:auto;}");

	document.write("#botao_fechar_popup{padding:5px;}");

	document.write("#botao_fechar_popup	img {cursor:pointer;}");

	document.write("#conteudo_popup{font-family:Calibri;font-size:14px;text-align:center;cursor:pointer;}");

	document.write("#conteudo_popup	p{margin-top:5px;}");

	document.write(unescape('%3C/style%3E'));

	document.write(unescape('%3Cdiv id="popup"%3E%3Cdiv id="barra_popup"%3E%3Cdiv id="botao_fechar_popup"%3E'));

	document.write(unescape('%3Cimg alt="FECHAR" title="FECHAR" onclick="document.getElementById(\'popup\').style.display=\'none\';" src="imagens/icone_fechar.png" /%3E'));

	document.write(unescape('%3C/div%3E'));

	document.write(unescape('%3Cdiv id="conteudo_popup" onclick="location.href=\'' + url + '\'"%3E'));

	document.write(conteudo);

	document.write(unescape('%3C/div%3E%3C/div%3E%3C/div%3E'));

}



popup_div('Popup de Exemplo',403,403,'<img src="imagens/popup.jpg" />','http://www.exemplo.com.br')





</script>

Resultado final:



Bom proveito