Para criar uma janela modal em Bootstrap 5 que receba uma variável na abertura e redirecione para outra página com dados POST quando fechada, você pode seguir os seguintes passos:
- Crie um botão que irá abrir a janela modal e defina a variável a ser passada como um atributo de dados (data) no botão. Por exemplo:
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-var="valor-da-variavel">Abrir janela modal</button>
- Crie a janela modal com um formulário dentro dela para coletar quaisquer dados necessários. O formulário deve ter um campo oculto (hidden) para armazenar a variável que foi passada no botão. Por exemplo:
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Minha janela modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
</div>
<div class="modal-body">
<form id="meu-form" method="post" action="pagina-de-destino.php">
<input type="hidden" name="minha-var" id="minha-var" value="">
<!-- outros campos do formulário aqui -->
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary" onclick="submitForm()">Enviar</button>
</div>
</div>
</div>
</div>
Observe o campo oculto input com o name “minha-var”, o id “minha-var” e o value vazio.
- Crie uma função JavaScript que será chamada quando o botão “Enviar” na janela modal for clicado. Essa função deve definir o valor do campo oculto com a variável que foi passada no botão e enviar o formulário. Por exemplo:
function submitForm() {
var minhaVar = $('#exampleModal').data('var');
$('#minha-var').val(minhaVar);
$('#meu-form').submit();
}
Esta função pega o valor da variável passada no botão usando $('#exampleModal').data('var'), define o valor do campo oculto usando $('#minha-var').val(minhaVar) e envia o formulário usando $('#meu-form').submit().
- Finalmente, adicione um script no final do seu HTML que inicializa o componente Modal do Bootstrap e define um manipulador de evento que é chamado quando a janela modal é fechada. Este manipulador de eventos redirecionará para a página de destino e enviará os dados POST. Por exemplo:
<script>
var myModal = new bootstrap.Modal(document.getElementById('exampleModal'));
myModal.addEventListener('hide.bs.modal', function (event) {
var form = document.getElementById('meu-form');
form.submit();
})
</script>
Este script inicializa o componente Modal do Bootstrap e define um manipulador de evento que é chamado quando a janela modal é fechada. Este manipulador de eventos redirecionará para a página de destino e enviará os dados POST.
DICA: apesar do elemento data-var fazer parte do HTML, para manipular o data-var usando JavaScript, é necessário usar uma biblioteca como o jQuery ou selecionar o elemento DOM usando métodos nativos do JavaScript, como getElementById(), e, em seguida, manipular o atributo data-var. Neste caso, usar o jQuery pode ser mais fácil e mais conveniente.
<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
Veja um exemplo completão:
Aqui está um exemplo completo de código HTML, CSS e JavaScript para a janela modal em Bootstrap 5 com a funcionalidade supracitada:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Exemplo de janela modal com Bootstrap 5</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<!-- jQuery e Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Exemplo de janela modal com Bootstrap 5</h1>
<p>Clique no botão abaixo para abrir a janela modal:</p>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-var="valor-da-variavel">Abrir janela modal</button>
</div>
<!-- Janela Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Minha janela modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
</div>
<div class="modal-body">
<form id="meu-form" method="post" action="pagina-de-destino.php">
<input type="hidden" name="minha-var" id="minha-var" value="">
<div class="mb-3">
<label for="nome" class="form-label">Nome:</label>
<input type="text" class="form-control" id="nome" name="nome">
</div>
<div class="mb-3">
<label for="email" class="form-label">E-mail:</label>
<input type="email" class="form-control" id="email" name="email">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary" onclick="submitForm()">Enviar</button>
</div>
</div>
</div>
</div>
<!-- Script para enviar o formulário -->
<script>
function submitForm() {
var minhaVar = $('#exampleModal').data('var');
$('#minha-var').val(minhaVar);
$('#meu-form').submit();
}
var myModal = new bootstrap.Modal(document.getElementById('exampleModal'));
myModal.addEventListener('hide.bs.modal', function (event) {
var form = document.getElementById('meu-form');
form.submit();
})
</script>
</body>
</html>