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