La respuesta correcta parece la de @JonathanArias, pero aquí te dejo otra posible forma de gestionarlo.
Quizás lo mejor será que escondas el modal y luego lo vuelvas a poner al salir del SweetAlert, así el foco se va cambiando correctamente entre los diálogos modales.
Para ello debes primero definir una constante que crea un modal que apunta al id del modal:
const elModal = new bootstrap.Modal(document.getElementById('myModal'))
y luego cerrarlo al pulsar el botón con la función hide()
y al salir abrirlo con la función show()
.
elModal.hide();
...
elModal.show();
Aquí te dejo un snippet completo con todo aplicado, para que lo pruebes (he quitado cosas que molestaban un poco).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
<div class="container">
<h2>Cerrar el modal</h2>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Open modal
</button>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog modal-dialog-scrollable" data-backdrop="static" data-keyboard="false">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p>Prueba.</p>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="submitNuevaDivisa">
<i class="fe fe-save"></i> Guardar
</button>
</div>
<script>
const elModal = new bootstrap.Modal(document.getElementById('myModal'))
$('#submitNuevaDivisa').on("click", function() {
elModal.hide();
Swal.fire({
title: 'Creaci\u00f3n',
html: "¿Confirma la creaci\u00f3n de la nueva divisa?",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Aceptar'
}).then((result) => {
if (result.isConfirmed) {}
elModal.show();
})
});
</script>
</div>
</div>
</div>
</body>
</html>