Criando um Modal Responsivo 100% CSS

Fazer componentes em CSS puro é um dos privilégiso que chegaram com o CSS3, seguindo essa onda, resouvi criar um modal responsivo que não use JS. É claro que não ter JS nem sempre será uma vantagem em seu projeto, mas acredito que o resultado ficou interessante e resouvi compartilha-lo aqui.

Vamos lá, nosso HTML ficou assim:

<body>
    <h1>Simple Responsive Modal</h1>
    <a href="#modal">Open Modal</a>
    <section id="modal" class="">
       <div class="content">
           <header>
              <h1>Nome do Modal</h1> 
           </header>
            <iframe width="100%" height="405" src="https://www.youtube.com/embed/fLexgOxsZu0" frameborder="0" allowfullscreen></iframe>
              <p id="eow-description">Moonshine Jungle Tour 2014 tickets and more info: <br><a href="http://www.brunomars.com/moonshinejungletour" target="_blank" title="http://www.brunomars.com/moonshinejungletour" rel="nofollow" dir="ltr" class="yt-uix-redirect-link">http://www.brunomars.com/moonshinejun...</a><br><br>Available now on iTunes!.</p>
           <a href="#" class="close">X</a>
       </div>
    </section>
</body>

Como podem ver nada muito complicado, os principais pontos desse HTML são:

section#modal será onde os compontentes do modal ficarão.
div.content será onde o conteudo (seja lá qual for) vai ficar.
<a href=”#modal”></a> será o  link que ativará nosso modal
<a href=”#”></a>  será o link que fechará nosso modal.

Nosso CSS ficará:

body {
    font-family:sans-serif;
    background:gray;
}
#modal::before{
    position: fixed;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(255,0,0,0.4);
    top: 0;
    left: 0;
    
}
#modal .content{
    position:absolute;
    width:90%;
    max-width: 900px;
    height:90%;
    max-height:600px;
    background:white;
    padding:20px;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    box-sizing: border-box;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
    border-radius: 6px;    
}
#modal .content .close{
    width: 30px;
    height: 30px;
    display: block;
    font-weight: bold;
    background-color: black;
    border-radius: 25px;
    color: white;
    text-align: center;
    line-height: 30px;
    text-decoration: none;
    font-size: 14px;
    box-shadow: 0px 0px 5px rgb(0,0,0);
    top: -10px;
    right: -10px;
    position: absolute;
    
}
#modal{
    opacity: 0;
    height: 0;
    transition: opacity 0.4s;
    display: block;
    pointer-events: none;
}
#modal:target{
    opacity: 1;
    height: auto;
    pointer-events: auto;
}

A mecanica é bem simples, o :target é ultilizado para adicionar estilo quando uma ancora é selecionada, com ele eu posso ativar nosso modal atravéz daquele link no html. O :before do #modal foi usado pra fazer aquela camada escura embaixo do modal. Esse Modelo em questão se espande tanto em autura quanto em largura, mas acredito que pode ser facilmente adaptado para outras situações.

É isso, espero que tenha a leitura tenha sido proveitosa, se tiver dúvidas sinta-se avontade para deixar nos comentários.

É isso.

Post a comment

* Copy This Password *

* Type Or Paste Password Here *

14,971 Spam Comments Blocked so far by Spam Free Wordpress

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>