Fala pessoal, tudo certo?
Vou demonstrar aqui uma das maneiras de carregar uma página externa dentro de uma modal utilizando Bootstrap 5 e um pouco de JavaScript e jQuery.
Esse é um jeito de facilitar o uso de uma única modal para conseguir chamar qualquer outra página dentro dela. Pode existir métodos mais eficazes e estou ansioso em aprender, então compartilhe sua sugestão nos comentários.
Antes de tudo, certifique-se de ter incluído o Bootstrap 5 CSS e JavaScript em sua página HTML. Você também precisará do jQuery.
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de Modal com Bootstrap 5</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Conteúdo da página -->
<div class="container">
<h1>Exemplo de Modal com Bootstrap 5</h1>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Abrir Modal
</button>
</div>
<!-- Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Página Externa</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<!-- Aqui é onde o conteúdo externo será carregado -->
</div>
</div>
</div>
</div>
<!-- jQuery e Bootstrap 5 JavaScript -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>O próximo passo é adicionar um pouco de JavaScript para carregar o conteúdo externo na modal quando o botão “Abrir Modal” é clicado. Para isso, adicione o seguinte código após a inclusão do jQuery e do Bootstrap:
<script>
$(document).ready(function () {
// Quando o botão "Abrir Modal" é clicado
$(".btn-primary").on("click", function () {
// URL da página externa que você deseja carregar
var externalPageUrl = "https://www.example.com"; // Substitua pelo URL desejado
// Carrega o conteúdo externo dentro da modal usando um iframe
$(".modal-body").html('<iframe src="' + externalPageUrl + '" frameborder="0" width="100%" height="400"></iframe>');
});
// Limpa o conteúdo da modal ao fechá-la para que o conteúdo não seja carregado novamente na próxima abertura
$(".modal").on("hidden.bs.modal", function () {
$(".modal-body").empty();
});
});
</script>O código acima usa jQuery para manipular o comportamento do botão e carregar o conteúdo da página externa em um iframe dentro da modal.
Lembre-se de que o exemplo acima carrega o conteúdo da página externa usando um iframe. Isso pode não ser ideal para todos os casos, pois o conteúdo externo pode não se comportar corretamente em um iframe. Portanto, é importante considerar a segurança e o layout da página externa antes de carregá-la dentro da modal.
Com esse código, sempre que o botão “Abrir Modal” for clicado, a modal será exibida com o conteúdo da página externa carregado nela através de um iframe. Quando a modal for fechada, o conteúdo do iframe será removido para garantir que, na próxima abertura da modal, o conteúdo seja carregado novamente a partir da página externa.
