Blog ComercialWeb - São Paulo - SP
E-mail: comercial2@comercialweb.com.br
Atualizado: 07/11/2019

Janela modal responsiva HTML5 CSS3

Você já deve ter visto em diversos sites uma janela modal. Ela funciona abrindo um frame de uma página ou imagem, podendo colocar até mesmo um formulário para cadastro.

Neste artigos vamos ensinar a fazer de forma descomplicada.

Folha de estilos:
<style>
.janela {
position: fixed;
font-family: Arial ;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 90%;
background: rgba(104,62,243,0.47);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.janela:target {
opacity: 1;
pointer-events: auto;
}
.janela > div {
width: 90%;
height:90%;
position: relative;
margin: 3% auto;
padding: 5px 18px 3px 3px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
border: 2px solid #000000;
}
.close {
background: #FF0000;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -1px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #2A00FF;
}
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
h1{text-align: center}

footer{
border: 2px solid #ccc;
clear: both;
text-align:right;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size: 12px;
}
</style>


HTML:
<a href="#openModal" style="font-size: 20px; font-family: 'Lucida Grande', Verdana; font-weight: bold;">Abrir Janela 01</a>
<div id="openModal" class="janela">
  <div>
    
    <a href="#close" title="Fechar" class="close">X</a>  
   <iframe src="pagina-01.html" frameborder="0" height="100%" width="100%" ></iframe>  
  
  </div>
</div>
<br>

<a href="#openModal2" style="font-size: 20px; font-family: 'Lucida Grande', Verdana; font-weight: bold;">Abrir Janela 02</a>
<div id="openModal2" class="janela">
  <div>
    <a href="#close" title="Fechar" class="close">X</a>  
   <iframe  frameborder="0" src="pagina-02.html" height="100%" width="100%"></iframe>
  </div>
</div>


Veja o resultado

Fonte: Luciano

Comente esta matéria:


Compartilhe esta matéria




Veja Também