Eu queria saber como mudar o link do botão alerta. Por exemplo, quando apertar OK
ir para uma página. Eu tentei o seguinte código mas não deu certo:
echo "<script>alert('Clique para ir para a pagina inicial!'); <a href="home.php"></a> </script>";
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeNão é um caminho padrão, ou melhor, tem erro de pensamento ai. Quando a pessoa clica no botão ok do alert, significa apenas um consentimento, que ela leu a mensagem, nada mais. Para redirecionar para outro lugar, simplesmente coloque um redirecionamento na linha de baixo da mensagem de echo. Pode ser de redirecionamento em javascript mesmo com o echo do PHP.
echo "window.location.href = "http://www.devmedia.com.br"";
Com o método alert()
só temos uma opção, clicar OK e ir para onde window.location.href
apontar.
echo '<script type="text/javascript">';
echo 'alert("Clique para ir para a pagina inicial!");';
echo 'window.location.href = "https://pt.stackoverflow.com/questions/";';
echo '</script>';
Com o método confirm()
, temos duas opções, clicando em OK
ir para onde window.location.href
apontar e clicando em Cancelar
fechar a caixa de dialogo e permanecer na página.
echo '<script type="text/javascript">';
echo 'confirm("Clique OK para ir para a pagina inicial!");';
echo 'window.location.href = "https://pt.stackoverflow.com/questions/";';
echo '</script>';
Restrinja o uso das caixas de dialogo de alerta em seus projetos de documentos HTML ou site. A modalidade das janelas atrapalha fluxo de navegação de um usuário por suas páginas. Comunique-se com seus usuários por outros meios como por exemplo janela modal.
Janela modal puro CSS e HTML
#modal {
left: 20%;
margin: 5px 0 0 0;
opacity: 1;
position: absolute;
top: 5px;
visibility: visible;
width: 50%;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
#modal:target{
opacity: 0;
top: -50%;
visibility: hidden;
}
#modal .header, #modal .footer {
border-bottom: 1px solid #e7e7e7;
border-radius: 5px 5px 0 0;
}
#modal .footer {
border: none;
border-top: 1px solid #e7e7e7;
border-radius: 0 0 5px 5px;
}
#modal h2 {
margin: 0;
}
#modal .a {
float: right;
}
#a,#b {
font-family: Arial, Helvetica, sans-serif;
padding: 15px;
}
#modal .copy, #modal .header, #modal .footer {
padding: 15px;
}
.modal-content {
background: #f7f7f7;
position: relative;
z-index: 20;
border-radius: 5px;
}
#modal .copy {
background: #fff;
}
#modal .overlay {
background-color: #000;
background: rgba(0,0,0,.5);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
<div id="modal">
<div class="modal-content">
<div class="header">
<h2>Notification</h2>
</div>
<div class="copy">
<h2>Ir para a pagina inicial?</h2>
</div>
<div class="cf footer">
<a id="a" href="https://pt.stackoverflow.com/questions/" class="btn">Sim</a>
<a id="b" href="#modal" class="btn">Não</a>
</div>
</div>
<div class="overlay"></div>
</div>