Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JQuery - 26
Tutorial para Gerar um Simples Popup

Nesse tutorial veremos como criar um simples popup.
Popup é a caixa de diálogo que aparece do nada quando um botão é clicado. Isso torna a página da Web mais atraente. Em vez de carregar conteúdo pequeno em alguma outra página da Web clicando em um botão ou link, podemos tornar nossa página mais atraente adicionando pop-ups para textos pequenos.
jQuery tem um método simples para isso chamado método toggle(). Esse método basicamente ajuda a ocultar e mostrar o pop-up sempre que ele é acionado.
Vejamos um exemplo:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style type="text/css"> .content { position: absolute; top: 30%; left: 30%; right: 30%; bottom: 30%; width: 460px; height: 140px; text-align: center; background-color: lightgrey; padding: 10px; z-index: 100; display: none; } .close-btn { position: absolute; right: 10px; top: 10px; background-color: black; color: white; border-radius: 0px; padding: 4px; } </style> <script> function togglePopup() { $(".content").toggle(); } </script> <script src='/google_analytics_auto.js'></script></head> <body> <button onclick="togglePopup()">Clique aqui</button> <div class="content"> <div onclick="togglePopup()" class="close-btn">x</div> <h3>Popup</h3> <p> This site is specially designed to provide help to students, working professionals and job seekers. We are fully dedicated to make each tutorial very simple to learn and understand. </p> </div> </body> </html>
Resultado:
Veja na imagem o resultado desse código:

<< Tutorial para Criar Efeitos 3D em Textos
Tutorial para Obter o Valor de um Checkox >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino