jQuery Plugin für das iOS-Pop-Up-Fenster

Dieses Pop-up-Fenster-Plugin wurde von mir selbst nach dem Original-Design der iOS-Pop-up-Fenster nachgebildet und ist ein benutzerdefiniertes Plugin, das Alert-Pop-up-Fenster und Confirm-Bestätigungsfenster umfasst. Es unterstützt die Anpassung von Titel, Inhalt, Button-Text und Callback-Funktion des Buttons. Es ist sehr einfach zu verwenden und kann erweitert werden. Nachfolgend finden Sie die Verwendungsmethode des Plugins, die auf den ersten Blick verständlich ist:

Zunächst müssen die jQuery-Bibliothek und die Plugin-Bibliothek sowie die CSS-Datei importiert werden

<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' />

Schnelle Verwendung der Alert-Pop-up-Fenster

$.alert('Sind Sie sicher, dass Sie fortfahren möchten??'); --Inhalt unterstützt HTML-Code
$.alert({
 title: 'Alert-Pop-up-Fenster!', --Titel Standardtitel (Tipp)
 content: 'Sind Sie sicher, dass Sie fortfahren möchten?? --Inhalt
});

Alert-Rückrufpop-up-Fenster verwenden

$.alert({
 title: 'Alert-Rückrufpop-up-Fenster!',
 content: 'alert mit Callback-Funktion, klicken Sie auf die Bestätigungsschaltfläche, um die Callback-Funktion auszulösen',
 buttons: {
  ok: {
   text: 'Gut', --Knopftitel
   action: function () { --Rückrufereignis
     alert("Der Callback-Funktion des Knopfes wurde ausgeführt");
   }
  }
 }
});

Bestätigungsrückrufbestätigungsfenster verwenden

$.confirm('Sind Sie sicher, dass Sie fortfahren möchten??');
$.confirm({
 title: 'Bestätigungsrückrufbestätigungsfenster!', 
 content: 'Sind Sie sicher, dass Sie fortfahren möchten?? 
});

Bestätigungsrückrufbestätigungsfenster verwenden

$.alert({
 title: 'Bestätigungsrückrufbestätigungsfenster!',
 content: 'Bestätigungsbestätigungsfenster, klicken Sie auf die Schaltfläche, um die Callback-Funktion auszulösen',
 buttons: {
  ok: { --Bestätigungsknopf
   text: 'Bestätigen',
   action: function () {
     alert("Der Callback-Funktion des Bestätigungsknopfes wurde ausgeführt");
   }
  },
  close: { --Schließknopf
   text: 'Schließen',
   action: function () {
     alert("Der Callback-Funktion des Schließknopfes wurde ausgeführt");
   }
  }
 }
});

Bestätigungsknopf kann mehrere Knöpfe enthalten

Effektive Anzeige

Ist es sehr einfach zu verwenden? -_-

Herunterladelink:https://pan.baidu.com/s/1pLJJky3

Das Ganze ist eine Anleitung, die der Herausgeber den Lesern vorgestellt hat, hoffentlich hilft es Ihnen weiter. Wenn Sie irgendwelche Fragen haben, hinterlassen Sie mir bitte eine Nachricht, der Herausgeber wird rechtzeitig antworten. Vielen Dank auch für die Unterstützung der Website呐喊教程!