JAVASCRIPT - CAIXA DE DIÁLOGO PARA SITE

Este script pede informações do usuário do site ou blog, para retornar uma ação. Com certeza você já visitou um site que ao clicar em um link, lhe é pedido uma confirmação ou coisa parecida.

Um exemplo é o Hotmail, que ao esvaziar a lixeira pergunta se você quer mesmo realizar esta ação. O código pode ser configurado de várias formas. Veja abaixo:

O que fazer

<script language="JavaScript">
function ex()
{
var x=confirm("Você quer mesmo sair desta página?")
if (x)
 window.open("https://www.variedadesedicas.com")
else
alert("Você irá permanecer aqui!")

}
</script>
Clique <a href="#" onclick="ex()">AQUI</a>

A parte do código em vermelho, mostra o que irá acontecer se você clicar em Ok, no exemplo acima inserimos um redirecionamento para uma outra página.

A parte do código em azul, mostra o que irá acontecer se você clicar em Cancelar, no exemplo acima inserimos um redirecionamento para uma outra mensagem em forma de alerta.


Clique AQUI para ver como ficou!

Agora iremos configurar de outra forma, veja o código abaixo:

<script language="JavaScript">
function ex2()
{
var x=confirm("Você quer mesmo sair desta página?")
if (x)
 window.open("https://www.variedadesedicas.com")

}
</script>
Clique <a href="#" onclick="ex2()">AQUI</a>

A parte do código em vermelho, mostra o que irá acontecer se você clicar em Ok, no exemplo acima inserimos um redirecionamento para uma outra página, exatamente como no código anterior.

Note que retiramos a parte do código, que redirecionava para a mensagem em forma de alerta, sendo assim, ao clicar em Cancelar você irá permanecer na página, e não receberá nenhuma mensagem.


Clique AQUI para ver como ficou!

Uma outra forma de configuração, é utilizando o redirecionamento para páginas diferentes nas 2 hipóteses, Ok  e Cancelar. veja abaixo:

<script language="JavaScript">
function ex3()
{
var x=confirm("Você quer mesmo sair desta página?")
if (x)
window.open("https://www.variedadesedicas.com")
else 
window.open("https://www.google.com.br")
}
</script>
Clique <a href="#" onclick="ex3()">AQUI</a>

Agora se você clicar em Ok ou Cancelar será redirecionado para páginas web diferentes.


Clique AQUI para ver como ficou!

Se você quiser também pode usar o comando para atualizar a página, usando a função history.go() Veja abaixo:

<script language="JavaScript">
function ex4()
{
var x=confirm("Você quer mesmo atualizar esta página?")
if (x)
history.go()

}
</script>
Clique <a href="#" onclick="ex4()">AQUI</a>

Se você clicar em Ok, a página é atualizada.


Clique AQUI para ver como ficou!

Lembrando que você pode mudar a pergunta, inverter a posição do redirecionamento com o alerta, mudar as urls é claro,  colocar apenas alertas, ou utilizar outros comandos.

Brinque a vontade, só não esqueça de manter as aspas dos códigos, caso contrário não irá funcionar.

Comente este artigo

0 Comentários