Como colocar uma imagem popup no blog

Tem coisa mais irritante do que aquela janelinha popup que se abre automaticamente logo no carregamento de uma página com a pergunta: "Gostou do nosso site? Então curta a nossa página no Facebook." Ora, como o leitor pode dar sua opinião se ainda nem começou a ler? Ainda mais com aquela janelinha atrapalhando? 

Um dos princípios básicos da internet é a liberdade. O leitor é quem escolhe o que quer e o que não quer ver. Tentar interferir neste direito de escolha para promover umsite ou blog pode ter um efeito contrário ao desejado.

Mas, convenhamos, uma janelinha popup até que tem um efeito interessante, não é? (desde que não abra automaticamente nem ao passar o mouse sobre um link). Um exemplo é esta janela que só se abre se o leitor clicar no link. Na verdade não é uma janela popup convencional porque ela se abre sobre a janela principal em outra camada (layer). Nela podemos adicionar tanto imagem quanto texto.

Abaixo temos o código: 

<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBA-GSDSSvAWRZ-HUbqwdeU_tcwtM_CSomVMM8BEyC4hNPCfa_shWMjoPaoO-FPUavIQNxCNOMUiS-RYkNSNaZjaMXje0DaAWZTj_EEP9vWlkzt3tCZgLKq9OUBIpfWPdd7MbL_jI3plI/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>

As dúvidas podem ser esclarecidas nos comentários do próprio código. Apenas duas observações: a imagem background.png é a responsável pela transparência da área externa da janela e a imagem close.png é o botão de fechamento da janela. Hospede as duas imagens e substitua seus respectivos links no código.