Sweetalert: campo de entrada não funcional quando usado em cima de um modal de bootstrap

Criado em 29 jul. 2015  ·  22Comentários  ·  Fonte: t4t5/sweetalert

Atualmente estou ligando para swal de dentro de um modal bootstrap. Parece que os botões funcionam, mas a entrada do swal não aceita um clique e nem toma o foco. Gostaria de saber se esse é um problema conhecido ou possivelmente algo que estou fazendo.

Comentários muito úteis

Descobri que o culpado é tabindex="-1" definido no modal do Bootstrap.

O conserto:

// 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 comentários

Eu tive o mesmo problema. O que acabei fazendo foi 'esconder' o modal com modal.hide, abrindo o swal, fazendo o que for preciso com o inputValue, depois mostrar o modal com modal.show em caso de sucesso ou cancelamento do swal.
Espero que isto ajude.

Dan
Eu encontrei uma solução para isso. Vou postar amanhã

Enviado do Outlook

Na segunda-feira, 10 de agosto de 2015 às 6h52 -0700, "Dan Kaufman" [email protected] escreveu:

Eu tive o mesmo problema. O que acabei fazendo foi 'esconder' o modal com modal.hide, abrindo o swal, fazendo o que for preciso com o inputValue, depois mostrar o modal com modal.show em caso de sucesso ou cancelamento do swal.

Espero que isto ajude.

-
Responda a este e-mail diretamente ou visualize-o no GitHub.

Olá mteichtahl,

Você ainda postou a correção? Eu não consigo achar. Realmente ajudaria!

Oi,

O mesmo problema com o alerta de doce (assim como com sweetalert2).
O campo de entrada não obtém o foco apenas no Firefox. Isso acontece apenas ao abrir um swal de um modal de bootstrap.

Ainda não consigo descobrir o problema. Realmente estranho.

Estou com o mesmo problema ... alguém tem solução?

oi, isso permite mostrar o marcador de posição de entrada, mas não é uma correção para focar na entrada ...

# 537

Eu tenho o mesmo problema, não consigo encontrar a solução ...

+1

Descobri que o culpado é tabindex="-1" definido no modal do Bootstrap.

O conserto:

// 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');
}

Tenho um problema quase idêntico, exceto que só ocorre se o modal for tão alto que possa ser rolado no eixo y.

Por favor me ajude...

A correção da guia do Cinamonas não funcionou para mim :(

+1
@eminumut @navas
Você chamou fixBootstrapModal () antes de mostrar swal? Eu esqueci de fazer isso no início, mas agora funciona perfeitamente!

Obrigada @Cinamonas

@ Alagaesia93

Você poderia me mostrar alguns exemplos?

@eminumut

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

Funciona para mim :)

A correção gera um erro de sintaxe no IE11

@ caleb87 , atualizei o snippet para não usar as funções de seta e const .

Este parece ser um problema com o Bootstrap, então vou encerrar por enquanto. Obrigado pela correção @Cinamonas!

Oi, eu enfrentei o mesmo problema.
Este problema pode ser resolvido removendo {tabindex = "- 1"} do Bootstrap Modal.
Está funcionando bem para mim.

Alguém sabe como aplicar essa correção no R? Estou tendo o mesmo problema, mas minhas tentativas de convertê-lo para R falharam até agora

Descobri que o culpado é tabindex="-1" definido no modal do Bootstrap.

O conserto:

// 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');
}

gênio

Para quem tem mais de um modal, você pode usar:
Documento sem título (1) .pdf

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

waldyrious picture waldyrious  ·  5Comentários

blackrosezy picture blackrosezy  ·  6Comentários

AlexV525 picture AlexV525  ·  4Comentários

girishbr picture girishbr  ·  5Comentários

sastrahost picture sastrahost  ·  5Comentários