Wie erstelle ich einen benutzerdefinierten Dialogfeld in AJAX für HTML5 und CSS3 Programmierung erstellen

AJAX ermöglicht HTML5 und CSS3 Programmierer benutzerdefinierte Dialogfelder zu machen. javascript liefert ein paar Dialogfelder (die Warnung und Aufforderung Dialogfelder), aber diese sind ziemlich hässlich und relativ unflexibel. Die jQuery UI umfasst eine Technik für jede div in einem virtuellen Dialogfeld drehen. Das Dialogfeld folgt dem Thema und ist veränderbar und beweglich.

das Dialogfeld zu bauen, ist nicht schwierig, aber Sie müssen es auf der Lage sein, zum Ein- und Ausschalten mit dem Code, oder es wird nicht wie eine richtige Dialogfeld handeln (die ein Fenster in das Betriebssystem nachahmt):

1. Erstellen Sie die div Sie beabsichtigen, als Dialogfenster zu verwenden.

   Erstellen Sie ein div und geben ihm eine Kennung, so dass Sie es in einem Dialogfeld Knoten drehen kann. Ergänzen Sie die Titel Attribut, und der Titel zeigt im Dialogfeld Titelleiste oben.

   Der Dialog-Klasse können Sie einen beweglichen, sizablecustomized Dialogfeld im Einklang mit dem installedpage Thema zu haben.

2. Drehen Sie den div in einem Dialogfenster.

   Verwenden Sie die Dialog() Methode, um die div in ein jQuery-Dialogfeld Knoten zu drehen in der drin() Funktion:

    $ ( "# Dialog") Dialog (). -

3. Blenden Sie das Dialogfeld standardmäßig aktiviert.

   Normalerweise wollen Sie nicht das Dialogfeld sichtbar, bis eine Art von Ereignis eintritt. In diesem speziellen Beispiel können Sie das Dialogfeld angezeigt werden nicht wollen, bis der Benutzer auf eine Schaltfläche klickt. Sie können einen Code setzen Sie das Dialogfeld in der zu schließen drin() -Funktion, so dass das Dialogfeld erscheint nicht, bis er gerufen wird.

4. Schließen Sie den Dialog.

   Um ein Dialogfeld zu schließen, finden Sie im Dialogfeld Knoten und rufen Sie die Dialog() Verfahren auf ihn wieder. Dieses Mal, senden Sie die einzelnen Wert # 147-close # 148- als Parameter, und das Dialogfeld sofort schließen:

    // Zunächst engen Dialog $ ( "# Dialog") Dialog ( "close"). -

5. Ein Klick auf das X schließt sich automatisch das Dialogfeld.

   Das Dialogfeld hat eine kleine X, die auf den meisten Windows-Systeme wie das Fenster schließen Symbol sieht. Der Benutzer kann das Dialogfeld schließen, indem Sie auf dieses Symbol klicken.

6. Sie können das Dialogfeld mit dem Code zu öffnen und zu schließen.

   Meine offenen Dialog und Dialog schließen Tasten Funktionen aufrufen, die das Verhalten des Dialogfelds zu steuern. Zum Beispiel, hier ist die Funktion zum Öffnen-Dialog-Taste angehängt:

    Funktion Opendialog () {$ ( "# Dialog") Dialog ( "open") -.} // end Open