1

Al momento de dar click en el botón Guardar me despliega el mensaje de sweetalert2 pero si toco enter o espacio el modal de bootstrap (que está detrás) se cierra. ¿cómo arreglo ese problema?

No sé si hay una forma de modificarlo en la librería de bootstrap o la librería de sweetalert2 para que afecte a todos los mensajes de sweetalert2 o los modales globalmente.

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

    </div>
  </div>
</div>
<script>
$(document).ready(function(){
  MensajeEnviarNuevaDivisa();
});
function MensajeEnviarNuevaDivisa() {

    $('#submitNuevaDivisa').on("click", function () {
        Swal.fire({
            title: 'Creaci\u00f3n',
            html: "&#191;Confirma la creaci\u00f3n de la nueva divisa?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Aceptar'
        }).then((result) => {
            if (result.isConfirmed) {
            }
        })
    });

}
</script>

</body>
</html>

5
  • El problema esta siendo que cuando le das al enter, es como si le dieses click a una selecion y la selecion es el boton de cerrar que si te das cuenta durante un segundo antes de que se abra el segundo modal se selecciona en azul
    – Anthonyx82
    Commented el 25 abr. a las 9:17
  • 1
    No entiendo qué problema tienes: ¿evitar que no se cierre significa hacer que se cierre? ¿O querías evitar que se cierre? Commented el 25 abr. a las 9:17
  • @PabloLozano al darle al enter en el segundo modal se cierra el primero por lo que he explicado
    – Anthonyx82
    Commented el 25 abr. a las 9:18
  • No se si hubiese alguna forma de solucionar eso, tampoco se porque se selecciona el boton de cerrar del primer modal, pero el problema es ese 100%
    – Anthonyx82
    Commented el 25 abr. a las 9:19
  • 1
    Evitar no cerrar = hacer que se cierre; evitar cerrar = hacer que no se cierre. ¿Cuál es el comportamiento esperado?
    – padaleiana
    Commented el 25 abr. a las 10:55

3 respuestas 3

2

El problema realmente es que como el sweetalert y el modal están al mismo nivel, el modal es quien se lleva la atención de los eventos de teclado.

Al parecer la solución que propongo funciona muy bien, básicamente es indicarle al sweetalert que el modal es su elemento padre, con esto los eventos de teclado pasan a la alerta. Básicamente la línea que añadí fue la siguiente en las configuraciones de sweetalert:

target: document.getElementById('myModal'),

Te dejo todo el código funcionando.

<!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" tabindex="-1">
  <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>

    </div>
  </div>
</div>
<script>
$(document).ready(function(){
  MensajeEnviarNuevaDivisa();
});
function MensajeEnviarNuevaDivisa() {

    $('#submitNuevaDivisa').on("click", function () {
        Swal.fire({
            title: 'Creaci\u00f3n',
            html: "&#191;Confirma la creaci\u00f3n de la nueva divisa?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Aceptar',
            target: document.getElementById('myModal'), // Define cuál es el elemento padre de la alerta.
        }).then((result) => {
            if (result.isConfirmed) {
            }
        })
    });

}
</script>

</body>
</html>

1

La respuesta correcta parece la de @Jonathan-Arias, 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: "&#191;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>

1
  • Esta fue la respuesta que me sirvio. Muchas gracias Commented el 4 jun. a las 19:49
0

Me parece que el problema está en el sweetalert2 que cambia el foco, esto lo puedes comprobar al levantar el primer modal (el de bootstrap), en esa situación presionar enter no da problema y es solo cuando abre el sweetalert2 que presenta ese comportamiento anomalo.

Prueba con la configuración allowEnterKey=false, la cual evitará el uso de la confirmación por teclado.

<!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" data-focus="true">
    <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>

    </div>
  </div>
</div>
<script>
$(document).ready(function(){
  MensajeEnviarNuevaDivisa();
});
function MensajeEnviarNuevaDivisa() {

    $('#submitNuevaDivisa').on("click", function () {
        Swal.fire({
            title: 'Creaci\u00f3n',
            html: "&#191;Confirma la creaci\u00f3n de la nueva divisa?",
            icon: 'warning',
            
            allowEnterKey:false,

            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Aceptar'
        }).then((result) => {
            if (result.isConfirmed) {
            }
        })
    });

}
</script>

</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.