1

Modal

<button type="button" class="btn btn-danger alert-confirm m-b-10" onclick="_gaq.push(['_trackEvent', 'example', 'try', 'alert-confirm'])"><i class="fa fa-trash fa-lg"></i></button>

O que eu quero é que ao clicar no botão de confirmação ele me redirecione para outra pagina mas esse modal que eu estou a usar só tem esse código que é o código do botão para abrir o modal a minha pergunta é como redirecionar para outra pagina apos a confirmação no modal.

modal:

document.querySelector('.alert-confirm').onclick = function(){
    swal({
                title: "Tem a certeza?",
                text: "Se eliminar não voltará a ver este conteudo!",
                type: "warning",
                showCancelButton: true,
                confirmButtonClass: "btn-danger",
                confirmButtonText: "Sim, apagar isto!",
                closeOnConfirm: false
            },
            function(){
                swal("Apagado!", "A Informação foi apagada permanentemente.", "success");
            });
};
5
  • Considere acrescentar em sua pergunta o código que há no modal... isso facilita um possível ajuda Commented 17/12/2017 às 16:43
  • Amigo esse botao ai é o modal esse é o problema porque se eu tive-se um modal com 2 botõoes o de sim e o de cancelar era facil o problema e esse
    – Shider
    Commented 17/12/2017 às 16:54
  • o codigo do modal esta feito num ficheiro a parte e eu queria que o confirmar ele fosse para um ficheiro a parte mas so nesta situação
    – Shider
    Commented 17/12/2017 às 16:55
  • basicamente você tem que observar com javascript o "evento" de click no botão de confirmação que fica dentro do modal más se você não pode compartilhar em sua pergunta o código do dito botão (que fica dentro do modal) ai fica difícil lhe dar uma ajuda útil... Commented 17/12/2017 às 17:39
  • @LauroMoraes ja está!
    – Shider
    Commented 17/12/2017 às 17:44

1 Resposta 1

2

Segundo seu exemplo utilizando a classe ".alert-confirm" e o método querySelector não é a prática mais recomendada pois se houver mais de uma declaração desta classe na mesma página só ira observar o primeiro elemento.

O mais recomendado seria utilizar um "id" único e exclusivo para este botão.

Um exemplo com id (vanilla):

let btn = document.getElementById('confirm-btn')

if ( !!btn ) {
    btn.addEventListener('click', function(evt) {
    // para este exemplo
    alert('Confirmation button as been clicked!')
    // redirecionamento
    // location.replace('https://www.google.com')
    }, false)
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>




<!-- MODAL -->
<section id="awesome-modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content rounded-0">
            <div class="modal-header border-0 rounded-0">
                <h5 class="modal-title">Title</h5>
                <button type="button" class="close cp" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body pt-0">
                <div class="col mt-sm-4">
                    <button type="button" data-dismiss="modal" class="btn btn-block btn-secondary rounded-0">Cancel</button>
                </div>
                <div class="col mt-2 mt-sm-4">
                    <button id="confirm-btn" type="button" class="btn btn-block btn-primary rounded-0">Confirm</button>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CONTAINER -->
<section class="container-fluid px-0">

    <button type="button" data-toggle="modal" data-target="#awesome-modal" class="btn btn-info rounded-0">Abrir Modal</button>
<section>


<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js"></script>

Um exemplo com querySelector (usando a classe):

let btn = document.querySelector('.alert-confirm')

if ( !!btn ) {
    btn.addEventListener('click', function(evt) {
    // para este exemplo
    alert('Confirmation button as been clicked!')
    // redirecionamento
    // location.replace('https://www.google.com')
    }, false)
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>




<!-- MODAL -->
<section id="awesome-modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content rounded-0">
            <div class="modal-header border-0 rounded-0">
                <h5 class="modal-title">Title</h5>
                <button type="button" class="close cp" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body pt-0">
                <div class="col mt-sm-4">
                    <button type="button" data-dismiss="modal" class="btn btn-block btn-secondary rounded-0">Cancel</button>
                </div>
                <div class="col mt-2 mt-sm-4">
                    <button type="button" class="btn btn-block btn-primary alert-confirm rounded-0">Confirm</button>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CONTAINER -->
<section class="container-fluid px-0">

    <button type="button" data-toggle="modal" data-target="#awesome-modal" class="btn btn-info rounded-0">Abrir Modal</button>
<section>


<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js"></script>

Em ambos os exemplos utilizam addEventListener ao invés de tão somente onclick... já se o conteúdo for inserido dinamicamente talvez seja mais fácil utilizar jQuery:

 $('body').on('click', '.alert-confirm', function(evt) {
     //
     alert('Confirmation as been clicked!')
     // redirecionamento
     // location.replace('https://www.google.com')
 })

Se você é capaz de "houvir" o evento... podes fazer todo e qualquer tratamento, execução de funções e depois simplesmente redirecionar:

location.replace('https://www.google.com')

O URL é de sua escolha :P

3
  • Exato mas a questao é a seguinte o design do modal tava perfeito com todas as animações nao ah ipod-se de usar as mesmas animaões com esse tipo de modal que me mostrou?
    – Shider
    Commented 17/12/2017 às 18:37
  • Você não precisa usar o mesmo modal dos meus exemplos... apenas o javascript para capturar o evento de "click"... utilizei Bootstrap v4 beta 2 porque você não informou nem colocou o código que usa :/ Commented 17/12/2017 às 18:46
  • Ok Obrigado!! e desculpe alguma coisa!
    – Shider
    Commented 17/12/2017 às 18:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .