Criando uma popup com HTML5, CSS e JQuery

01/09/2017

Na vídeo-aula de hoje aprenderemos como centralizar uma div ou popup na tela do nosso navegador ou dispositivo. Para isso, criaremos três arquivos:

Arquivo de marcação (index.php)
Folha de estilos (stylesheet.css)
Biblioteca JQuery (jquery-2.1.4.js)
Javascript (javascript.js)

Centralizando div no HTML5 (index.php)

Vamos iniciar linkando nossos arquivos externos e criando a div pai container, a div popup e o botão que acionará o evento, a div login.

<!doctype html>
<html lang="pt-br">
    <head>
        <link rel="stylesheet" href="stylesheet.css">
        <script src="jquery-2.1.4.min.js"></script><!--Versão 3.1.0-->
        <script src="javascript.js"></script>
    </head>
            
    <body>         
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad at consectetur consequuntur, cumque, cupiditate earum esse excepturi facilis in molestias neque, porro quisquam quos rem saepe sapiente similique tempore voluptates.
        <div class="login">Login</div>
        <div class="popup"><h1>Popup</h1></div>
    </body>
</html>

Estilizando uma popup no CSS (stylesheet.css)

Na nossa folha de estilo em cascata iremos estilizar nossas divs, atribuindo o atributo display none a class popup, visto que só aparecerá mediante um evento JQuery conforme código abaixo:

.container{ width: 100%; }
.popup{position:absolute; width: 30%; height: 200px; background: #CCC; border-radius:10px; padding: 10px; display:none;}
.login{float:left;  background: #333; color: #FFF; font-weight:bold; border-radius: 5px; text-align:center; padding: 20px; cursor:pointer;}

Código javascript para fazer uma popup (javascript.js)

No nosso javascript iremos fazer o código responsável por centralizar a popup na tela mediante um evento.

$(document).ready(function(){
    $('.login').on('click',function(){
        var larguradatela=$(window).width();
        var larguradoelemento=$('.popup').width();
        var alturadatela=$(window).height();
        var alturadoelemento=$('.popup').height();
        var alturadodocumento=$(document).height();
        var left=((larguradatela - larguradoelemento)/2);
        var top=((alturadodocumento - alturadatela)+(alturadatela - alturadoelemento)/2);

        $('.popup').css({
            'display':'block',
            'top':top,
            'left':left
        });

        $('.container').css({
            'background':'#000'
        });

        $('body').css({
            'background': '#000'
        });
    });
});

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Trocando fotos sem refresh

Nessa vídeo-aula trabalharemos com o tema troca de fotos sem refresh, utilizando HTML5, CSS e JQuery. Esse tipo de sistema é bem comum nos e-commerces.

Inserindo aviso de CapsLock no login

Nesta vídeo-aula explicaremos como gerar um aviso de capslock ativado quando o usuário ligar o botão de capslock ao digitar a senha do login.

Javascript

Ensinaremos durante as aulas a codificação desta importante linguagem de programação.