Este artigo é um artigo espelhado de tradução automática, por favor clique aqui para ir para o artigo original.

Vista: 20094|Resposta: 2

[HTML/HTML5] Uma caixa de alerta muito bonita SweetAlert

[Copiar link]
Publicado em 24/12/2015 12:00:48 | | | |





Sweet Alert é um belo efeito de lembrete que substitui o tradicional Javascrip{filter}t Alert. O SweetAlert centraliza e se alinha automaticamente ao centro da página, então fica ótimo tanto se você está usando um computador desktop, celular ou tablet. Além disso, uma ampla variedade de opções de configuração personalizadas está disponível para controle flexível.

Como usar:

Apresentando:

<scrip{filter}t src="dist/sweetalert.min.js"></scrip{filter}t> <link rel="folha de estilo" type="text/css" href="dist/sweetalert.css">
Então, um exemplo simples:

swal({ título: "Erro!", texto: "Aqui está minha mensagem de erro!", tipo: "erro", confirmarTextoBotão: "Legal" });
Pacote de arquivos anexado: sweetalert-master.zip (650.13 KB, Número de downloads: 9, 售价: 2 粒MB)

Argumento
Valor padrão

Descrip{filter}tion
Títulonulo (obrigatório)O título do modal. Ele pode ser adicionado ao objeto sob a chave "título" ou passado como o primeiro parâmetro da função.
TextozeroUma descrip{filter}tion para o modal. Ele pode ser adicionado ao objeto sob a chave "texto" ou passado como o segundo parâmetro da função.
tipozeroO tipo do modal. O SweetAlert vem com 4 tipos embutidos que exibirão uma animação de ícone correspondente: "aviso", "Erro", "Sucesso" e "informação". Você também pode definir como "Entrada"para obter um modal de prompt. Ele pode ser colocado no objeto sob a chave "type" ou passado como o terceiro parâmetro da função.
allowEscapeKeytrueSe definido comotrue, o usuário pode descartar o modal pressionando a tecla Escape.
customClasszeroUma classe CSS personalizada para o modal. Ele pode ser adicionado ao objeto sob a chave "customClass".
allowOutsideClickfalseSe definido comotrue, o usuário pode descartar o modal clicando fora dele.
mostrarCancelarBotãofalseSe definido comotrue, um botão "Cancelar" será exibido, no qual o usuário pode clicar para dispensar o modal.
Botão mostrarConfirmartrueSe definido comofalse, o botão "OK/Confirmar" ficará oculto. Certifique-se de definir um temporizador ou definir o allowOutsideClick para true ao usar isso, para não incomodar o usuário.
confirmButtonText"OK"Use isso para alterar o texto no botão "Confirmar". Se o botão showCancel estiver definido como verdadeiro, o botão de confirmar mostrará automaticamente "Confirmar" em vez de "OK".
confirmButtonColor"#AEDEF4"Use isso para mudar a cor de fundo do botão "Confirmar" (deve ser um valor HEX).
cancelarButtonText"Cancelar"Use isso para alterar o texto no botão "Cancelar".
closeOnConfirmtrueDefinir parafalsese você quiser que o modal permaneça aberto mesmo que o usuário pressione o botão "Confirmar". Isso é especialmente útil se a função vinculada ao botão "Confirmar" for outro SweetAlert.
closeOnCanceltrueIgual ao closeOnConfirm, mas para o botão de cancelar.
imageUrlzeroAdicione um ícone personalizado para o modal. Deve conter uma string com o caminho até a imagem.
imageTamanho"80x80"Se imageUrl estiver definido, você pode especificar imageSize para descrever o tamanho que você quer que o ícone seja em px. Passe uma sequência com dois valores separados por um "x". O primeiro valor é a largura, o segundo é a altura.
TemporizadorzeroFechar automaticamente o temporizador do modal. Definido em ms (milissegundos).
HTMLfalseSe definido como true, não escapa dos parâmetros de título e texto. (Defina para false se estiver preocupado com ataques XSS.)
AnimaçãotrueSe definido comofalse, a animação do modal será desativada. Valores possíveis (de cadeia):pop(padrão quando a animação está definida como verdadeira),deslizar do topo, deslizar de baixo
inputType"texto"Altere o tipo do campo de entrada ao usartype: "input"(isso pode ser útil se você quiser que os usuários digitem sua senha, por exemplo).
inputPlaceholderzeroAo usar o tipo de entrada, você pode especificar um marcador para ajudar o usuário.
inputValuezeroEspecifique um valor de texto padrão que você quer que sua entrada mostre ao usartype: "input"
showLoaderOnConfirmarfalseDefinir paratruepara desativar os botões e mostrar que algo está carregando.





Anterior:HTTPS Essas Coisas (1) Princípio HTTPS (Reimpressão)
Próximo:Captcha da página ASP vs. MVC
 Senhorio| Publicado em 25/02/2017 18:36:23 |
Publicado em 08/12/2017 15:20:55 |
A estrutura pop da Layui também é boa de usar
Disclaimer:
Todo software, material de programação ou artigos publicados pela Code Farmer Network são apenas para fins de aprendizado e pesquisa; O conteúdo acima não deve ser usado para fins comerciais ou ilegais, caso contrário, os usuários terão todas as consequências. As informações deste site vêm da Internet, e disputas de direitos autorais não têm nada a ver com este site. Você deve deletar completamente o conteúdo acima do seu computador em até 24 horas após o download. Se você gosta do programa, por favor, apoie um software genuíno, compre o registro e obtenha serviços genuínos melhores. Se houver qualquer infração, por favor, entre em contato conosco por e-mail.

Mail To:help@itsvse.com