So arbeiten Sie mit Dialog in CSS3

Sowohl HTML5 und javascript machen es möglich, Dialogfelder in CSS3 anzuzeigen. Zum Beispiel können Sie eine Kombination aus einem HTML5 / CSS3-Dialogfeld, das nicht die Verwendung von javascript erfordert bei Code Project.

Hinzufügen von javascript bedeutet, dass Sie den sofortigen Zugriff auf die Warnung haben (), bestätigen () und prompt () Funktionen für begrenzte direkte Dialogfeld angezeigt. Sie haben auch alle Funktionen, die javascript wirklich erstaunlich, benutzerdefinierte Dialogfelder zu erstellen bieten kann.

Das Problem bei all diesen Ansätzen ist, dass man eine beträchtliche Menge an Code schreiben müssen, um das gewünschte Ergebnis zu erhalten. Auf der anderen Seite, mit jQuery UI ermöglicht es, diese Typen von Dialogfeldern ohne viel Codierung überhaupt zu schaffen:

  • Basic

  • lebhaft

  • Modal

  • Modal mit Bestätigung

  • Modal Form

  • Modal Nachricht

Darüber hinaus auch eine grundlegende jQuery UI Dialogfeld bietet eine bessere Funktionalität als der javascript alert () Funktion. Sie können das Dialogfeld bewegen, ändern Sie die Größe, und schließen Sie es durch das X in der oberen rechten Ecke. Der Text kann auch auf verschiedene Weise eingerichtet werden, weil es Standard-HTML-Eingabe verwendet.

Das folgende Beispiel beginnt mit einer internen Stil zu schaffen verwenden, um den Text zu dekorieren. (Können Sie finden komplette Code für dieses Beispiel in dem Kapitel 06 Widgets Ordner des herunterladbaren Code wie DialogBox.HTML.)

Dieser Code bietet ein paar einfache Änderungen an dem Text - gerade genug, so dass Sie das benutzerdefinierte CSS bei der Arbeit zu sehen. Der folgende Code erstellt das Dialogfeld auf dem Bildschirm automatisch, wenn Sie die Seite laden.

Erstellen einer einfachen Dialogfeld

Das Dialogfeld erfordert zwei Elemente - ein Behälter, wie ein

, die Beschriftung im Titel-Attribut und ein Textelement, wie ein zu halten

, den Inhalt zu halten. Beachten Sie, dass der Absatztext ein enthält in diesem Fall interessant Betonung auf das Wort bereitzustellen. Sie können formatieren Sie den Inhalt in irgendeiner Weise gewünscht, ohne überhaupt den Aufruf von jQuery UI ändern.

Das Skript verwendet eine ID-Selektor die für den Zugriff auf

. Es macht dann einen einfachen Aufruf von Dialog (), um das Dialogfeld auf dem Bildschirm anzuzeigen. Beachten Sie, dass es ein angenehmes Erscheinungsbild bietet und es enthält formatierten Inhalt, anders als die alert () Funktion, die ein strenges, quadratische Dialogfeld bietet, die jede Formatierung fehlt.

bild0.jpg

Ähnliche

Menü