Modal of specific Confirmation

Question

<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>

What I want is that when I click the confirmation button it redirects me to another page but this modal that I am using only has this code that is the code of the button to open the modal my question is how to redirect to another page after the confirmation in 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");
            });
};

Answer 1

According to your example using the class ".Alert-confirm" and the method querySelector is not the most recommended practice because if there is more than one declaration of this class on the same page only the first element will be observed.

The most recommended would be to use a "id" unique and exclusive to this button.

An example with 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>

An example with querySelector (using the class):

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>

In both examples they use addEventListener instead of just onclick... already if the content is inserted dynamically it may be easier to use jQuery:

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

If you are able to "houvir" the event... you can do any and all treatment, perform functions and then simply redirect:

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

The URL is of your choice :P