<style type="text/css">
#ImageBox {
position: fixed;
top: 0px;
left: 0px;
z-index: 999;
height: 100%;
width: 100%;
background-image: url(http://sites.google.com/site/juarezlourenco/background.png);
display: none;
overflow: auto;
}
.borderwindow { /*BORDA DA JANELA*/
background-color: #2497c8;
border-radius: 12px; /*Raio dos cantos da borda*/
padding: 12px; /*Largura da borda*/
}
.container {
position: relative;
}
#closebutton { /*BOTÃO FECHAR*/
position: absolute;
top: -13px; /*Posição veritical do botão*/
right: -13px; /*Posição horizontal do botão*/
}
.content { /*JANELA*/
background-color: #ffffff; /*Plano de fundo da janela*/
overflow: hidden;
}
.title { /*TÍTULO DA JANELA*/
background-color: #2497c8; /*Plano de fundo*/
font-family: Arial; /*Fonte*/
font-size: 14px; /*Tamanho da fonte*/
font-weight: bold; /*Peso da fonte*/
color: #ffffff; /*Cor da fonte*/
padding: 2px;
text-align: center; /*Alinhamento do texto*/
}
.texbox { /*TEXTO*/
background-color: #ffffff; /*Plano de fundo*/
font-family: Arial; /*Fonte*/
font-size: 12px; /*Tamanho da fonte*/
color: #333333; /*Cor da fonte*/
padding: 2px;
text-align: center; /*Alinhamento do texto*/
}
</style>
<script language="JavaScript">
function displayPopup(alert_MSG) {
var detail = document.getElementById('ImageBox');
detail.style.display="block";
}
function closePopup(alert_MSG) {
var detail = document.getElementById('ImageBox');
if (detail.style.display=="block") {
detail.style.display="none";
}
}
</script>
<a href="javascript:displayPopup('ImageBox')">Clique aqui</a> para abrir a janela <i>popup</i>.
<div id="ImageBox" style="display:none;">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="borderwindow">
<div class="container">
<div id="closebutton">
<a href="javascript:closePopup('ImageBox')">
<img src="http://sites.google.com/site/juarezlourenco/close.png" width="24" height="24" alt="Fechar" border="0" />
</a>
</div>
<div class="content">
<table width="500" border="0" cellspacing="20" cellpadding="0">
<tr>
<td>
<div id="messagebox">
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td class="title">
More info about Selena Gomez
</td>
</tr>
<tr>
<td class="texbox">
<br />
Selena Marie Gomez (born July 22, 1992) is an American actress, singer, and fashion designer. She is known for portraying Alex Russo, the protagonist in the Emmy Award-winning television series Wizards of Waverly Place. She subsequently ventured into feature films and has starred in the television movies Another Cinderella Story, Wizards of Waverly Place: The Movie, and Princess Protection Program. She made her starring theatrical film debut in Ramona and Beezus. (<a href="http://en.wikipedia.org/wiki/Selena_Gomez" title="Wikipedia" target="_blank">See more...</a>)
<br />
<br />
<img src="http://lh4.googleusercontent.com/-XlP5Eq9ZhFA/USJbojrvr6I/AAAAAAAADWo/sf2lUKQkjQc/I/selena-gomez.jpg" height="500" width="400" alt="Selena Gomez"/ >
<br />
<br />
<i>Text from <a href="http://en.wikipedia.org" title="Wikipedia" target="_blank">Wikipedia</a>, the free encyclopedia.</i>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
