English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Plugin de caixa de diálogo iOS clone usando jQuery

Este plugin de popup personalizado foi criado por mim, imitando o popup nativo do iOS, incluindo o popup de alerta e o popup de confirmação, suportando personalização de título, conteúdo, texto do botão e função de callback do botão. É muito fácil de usar e pode ser expandido. A seguir está o método de uso do plugin, fácil de entender:

Primeiro, importe as bibliotecas jQuery e plugins, bem como os arquivos CSS

<script src="./jquery-1.8.3.min.js"></script>
<script src="./jquery.confirm-1.1.js"></script>
<link href="./jquery.confirm-1.1.css" rel="external nofollow" rel='stylesheet' type='text/css' />

Alerta rápido de popup

$.alert('Tem certeza de que deseja continuar?? --O conteúdo suporta código HTML
$.alert({
 title: 'Caixa de diálogo de alerta!', --Título Título padrão (Avisos importantes)
 content: 'Tem certeza de que deseja continuar?&63; --Conteúdo
});

Uso do Caixa de diálogo de alerta de callback

$.alert({
 title: 'Caixa de diálogo de alerta de callback!',
 content: 'Alerta com função de callback, clique no botão de confirmar para acionar a função de callback',
 buttons: {
  ok: {
   text: 'Bom', --Título do botão
   action: function () { --Evento de callback
     alert("A função de callback do botão foi executada");
   }
  }
 }
});

Uso do Caixa de diálogo de confirmação Confirmar

63;
$.confirm({
 title: 'Caixa de diálogo de confirmação Confirmar!', 
 content: 'Tem certeza de que deseja continuar?&63; 
});

Uso do Caixa de diálogo de callback Confirmar

$.alert({
 title: 'Caixa de diálogo de callback Confirmar!',
 content: 'Caixa de diálogo de confirmação Confirmar, clique no botão para acionar a função de callback',
 buttons: {
  ok: { --botão de confirmar
   text: 'Confirmar',
   action: function () {
     alert("A função de callback do botão de confirmar foi executada");
   }
  },
  close: { --botão de fechar
   text: 'Fechar',
   action: function () {
     alert("A função de callback do botão de fechar foi executada");
   }
  }
 }
});

Os botões de caixa de diálogo de confirmação podem ser colocados em múltiplos lugares

Exibição de efeitos

Será que é muito simples de usar -_-

Link de download:https://pan.baidu.com/s/1pLJJky3

O que foi mencionado acima é o plugin de caixa de diálogo仿IOS apresentado pelo editor, esperamos que ajude a todos. Se tiverem alguma dúvida, deixem um comentário, o editor responderá a todos a tempo. Agradecemos também o apoio da comunidade ao site Tutorial de Grito!

Você também pode gostar