Março 13, 2021

Janela modal com jquery

Neste tutorial, veremos como criar uma janela modal com JQuery exibido no formulário de um pop-up pressionando um botão. Caso você não conheça jquery, é aconselhável que você tome um olho no tutorial da introdução ao jQuery.

Uma janela modal, é uma janela de diálogo que é geralmente exibida na tela acima do resto O conteúdo, geralmente, o bloqueio do Windows Modal Bloqueia ao restante do conteúdo da página até que ele interage com eles de alguma forma. Eles são usados como uma substituição das mensagens de alerta alert() de qualquer navegador, de modo que uma janela mais homogênea e personalizável seja obtida.

antes de começar, inclui jQuery No seu projeto e, em seguida, siga as etapas que você vê abaixo.

Versão simplificada

primeiro criaremos uma versão simples que apenas tem estilos associados. É comum que as janelas modais sejam exibidas em uma cobertura ou sobreposição que difunja o conteúdo da página de alguma forma. Desta forma, está implícito que o usuário deve interagir com a janela. É por isso que adicionaremos um para os quais atribuiremos a classe .overlay.

Em seguida somos Ir para adicionar a janela, que terá a classe .modal e também um botão que permite que você o abra. Na janela, também haverá um botão que lhe permita fechá-lo:

<h1>Modal</h1><div class="overlay"></div><div class="modal"> <h2>Modal</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <button class="close">Close</button> </div><button class="open">Open</button>

Em seguida, adicionaremos o código JQuery, que consistirá de um Ação que atribui a classe .active Tanto para a sobreposição quanto a janela quando clicamos no botão de abertura. Também adicionaremos outro que elimina a classe .active de ambos os elementos pressionando o botão de fechamento.

$(".open").on("click", function(){ $(".overlay, .modal").addClass("active");});$(".close, .overlay").on("click", function(){ $(".overlay, .modal").removeClass("active");});

a Continuação Nós definiremos os estilos CSS. A parte mais relevante é na classe .active Isso alterna a visibilidade da sobreposição e a janela modificando sua z-index e sua propriedade visibility respectivamente. Sua opacidade também será modificada para criar uma transição.

.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: .3s ease; z-index: -1; background: #000;}.overlay.active { opacity: 0.5; z-index: 2;}.modal { color: #fff; background: #000; max-height: calc(100% - 100px); position: fixed; top: 50%; left: 50%; max-width: 450px; transform: translate(-50%, -50%); visibility: hidden; opacity: 0; transition: .3s ease;}.modal.active { visibility: visible; z-index: 2; opacity: 1;}

e com esta versão básica de nossa janela modal estará pronta. Você pode ver o resultado em operação aqui.

Versão avançada

A partir da versão simplificada, adicionaremos mais uma ação, para que a janela também esteja próxima quando pressionamos a tecla ESC :

$(document).keyup(function(e) { if (e.keyCode === 27) { $(".overlay, .modal").removeClass("active"); }});

Também adicionaremos certos estilos de CSS para que ele não pareça que a janela modal é de 20 anos atrás:

e como você pode ver no resultado final, o aspecto da nossa janela melhorou muito. Você pode ver o resultado em operação aqui.

Avatar de Edu Lazaro

Edu Lázaro : Engenheiro técnico na computação, atualmente trabalho como desenvolvedor web e programador de videogame.

👋 Olá! Eu sou Edu, adoro criar coisas e escrevi este guia. Se você foi útil, o maior favor que você poderia fazer é compaticamente no Twitter 😊

Se você quiser saber meus projetos, siga-me no Twitter.

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *