Sweetalert: el campo de entrada no es funcional cuando se usa sobre un modal de arranque

Creado en 29 jul. 2015  ·  22Comentarios  ·  Fuente: t4t5/sweetalert

Actualmente estoy llamando a swal desde un modal de bootstrap. Parece que los botones funcionan pero la entrada del trago no acepta un clic ni se enfoca. Me pregunto si se trata de un problema conocido o posiblemente algo que estoy haciendo.

Comentario más útil

Descubrí que el culpable es tabindex="-1" que está configurado en el modal de Bootstrap.

La solución:

// call this before showing SweetAlert:
function fixBootstrapModal() {
  var modalNode = document.querySelector('.modal[tabindex="-1"]');
  if (!modalNode) return;

  modalNode.removeAttribute('tabindex');
  modalNode.classList.add('js-swal-fixed');
}

// call this before hiding SweetAlert (inside done callback):
function restoreBootstrapModal() {
  var modalNode = document.querySelector('.modal.js-swal-fixed');
  if (!modalNode) return;

  modalNode.setAttribute('tabindex', '-1');
  modalNode.classList.remove('js-swal-fixed');
}

Todos 22 comentarios

Tuve el mismo problema. Lo que terminé haciendo fue 'ocultar' el modal con modal.hide, abrir el trago, hacer lo que sea necesario con el inputValue, luego mostrar el modal con modal.show en caso de éxito o cancelar el trago.
Espero que esto ayude.

Dan
Encontré una solución para esto. Lo publicare mañana

Enviado desde Outlook

El lunes, 10 de agosto de 2015 a las 6:52 a. M. -0700, "Dan Kaufman" [email protected] escribió:

Tuve el mismo problema. Lo que terminé haciendo fue 'ocultar' el modal con modal.hide, abrir el trago, hacer lo que sea necesario con el inputValue, luego mostrar el modal con modal.show en caso de éxito o cancelar el trago.

Espero que esto ayude.

-
Responda a este correo electrónico directamente o véalo en GitHub.

Hola mteichtahl,

¿Aún publicaste la solución? No puedo encontrarlo. ¡Realmente ayudaría!

Hola,

El mismo problema con la alerta dulce (así como con sweetalert2).
El campo de entrada no se enfoca solo en Firefox. Esto sucede solo al abrir un trago de un modal de bootstrap.

Aún no puedo resolver el problema. Muy extraño.

Tengo el mismo problema ... ¿Alguien tiene una solución?

hola, esto permite mostrar el marcador de posición de entrada, pero no se fija para centrarse en la entrada ...

# 537

Tengo el mismo problema, no puedo encontrar la solución ...

+1

Descubrí que el culpable es tabindex="-1" que está configurado en el modal de Bootstrap.

La solución:

// call this before showing SweetAlert:
function fixBootstrapModal() {
  var modalNode = document.querySelector('.modal[tabindex="-1"]');
  if (!modalNode) return;

  modalNode.removeAttribute('tabindex');
  modalNode.classList.add('js-swal-fixed');
}

// call this before hiding SweetAlert (inside done callback):
function restoreBootstrapModal() {
  var modalNode = document.querySelector('.modal.js-swal-fixed');
  if (!modalNode) return;

  modalNode.setAttribute('tabindex', '-1');
  modalNode.classList.remove('js-swal-fixed');
}

Tengo un problema casi idéntico, excepto que solo ocurre si el modal es tan alto que se puede desplazar en el eje y.

Por favor, ayúdame...

La corrección de pestañas de Cinamonas no funcionó para mí :(

+1
@eminumut @navas
¿Ha llamado a fixBootstrapModal () antes de mostrar swal? Olvidé hacer eso al principio, ¡pero ahora funciona perfectamente!

Gracias @Cinamonas

@ Alagaesia93

¿Me mostraría algunos ejemplos?

@eminumut

fixBootstrapModal()
swal({whatever}, function(isConfirm){
whatever
restoreBootstrapModal()
}

Esto funciona para mi :)

La solución genera un error de sintaxis en IE11

@ caleb87 , actualicé el fragmento para que no use funciones de flecha y const .

Esto parece ser un problema con Bootstrap, así que cerraré por ahora. ¡Gracias por arreglar @Cinamonas!

Hola, me he enfrentado al mismo problema.
Este problema se puede resolver eliminando {tabindex = "- 1"} de Bootstrap Modal.
Funciona bien para mí.

¿Alguien sabe cómo aplicar esta corrección en R? Tengo el mismo problema, pero mis intentos de convertirlo a R han fallado hasta ahora

Descubrí que el culpable es tabindex="-1" que está configurado en el modal de Bootstrap.

La solución:

// call this before showing SweetAlert:
function fixBootstrapModal() {
  var modalNode = document.querySelector('.modal[tabindex="-1"]');
  if (!modalNode) return;

  modalNode.removeAttribute('tabindex');
  modalNode.classList.add('js-swal-fixed');
}

// call this before hiding SweetAlert (inside done callback):
function restoreBootstrapModal() {
  var modalNode = document.querySelector('.modal.js-swal-fixed');
  if (!modalNode) return;

  modalNode.setAttribute('tabindex', '-1');
  modalNode.classList.remove('js-swal-fixed');
}

genio

Para aquellos que tienen más de un modal, puede usar:
Documento sem título (1) .pdf

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

vmitchell85 picture vmitchell85  ·  6Comentarios

AlexV525 picture AlexV525  ·  4Comentarios

voodoo6 picture voodoo6  ·  4Comentarios

mouro001 picture mouro001  ·  3Comentarios

xgqfrms-GitHub picture xgqfrms-GitHub  ·  4Comentarios