terça-feira, 17 de janeiro de 2017

Instalar imagem PopUp no blog Blogger.

<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/AVvXsEimhdOTQyiQ4pqAlqdVZfVPexoFJ-5CuYBS-gPS5hxfKGrqWUilPCtZXFru_p9czNgsyQBEctIpRB-HZUoR3wDNbo3qy84g7oYzLZVDpGpyNQYhKNZPkzsZixkN32DP7So7yLNe_sMTwf4/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>

Share Article:

Item Reviewed: Instalar imagem PopUp no blog Blogger. Rating: 5 Reviewed By: Site Web Lista