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