Neste tutorial vamos fazer uma Janela Modal usando apenas HTML e CSS

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.

 

CSS :

<style>
.janela {
position: fixed;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
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 400msease-in;
transition: opacity 400msease-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>

Agora vamos a página HTML:

HTML:

<h1>Janela modal responsiva</h1>
<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>


Veja o resultado