Die Verwendung von Popup-Windows zum Anzeigen von Kurznachrichten auf der Webseite ist in Ordnung, wenn auch nicht so freundlich. Pop-ups sind jedoch machtlos mit langen Informationen wie den Nutzungsbedingungen der Website zu tun. Dies erfordert die Verwendung von etwas, das als modales Feldmodal bezeichnet wird und ein Multi-Line-Textfeld Textbereich in das Modalfeld einbettet.
Es ist zu schwierig, JavaScript Code manuell zu schreiben, aber es ist einfacher, mit Bootstrap zu schreiben.
1. Grundziele
Es gibt eine Webseite mit einem Hyperlink und einer Schaltfläche:
Wenn Sie auf sie klicken, wird ein Modalfeld geöffnet, wie unten gezeigt. In diesem modalen Feld wird in der oberen rechten Ecke auf die Taste X klicken und die Bestätigung unten geschlossen.
2. Produktionsprozess
1. Da Sie Bootstrap verwenden müssen, können Sie die Komponenten auf der offiziellen Website herunterladen (klicken Sie, um den Link zu öffnen). Die in der Produktionsumgebung verwendete Bootstrap -Version (klicken Sie, um den Link zu öffnen). Bootstrap3 ist nicht mit 2. kompatibel. Es wird empfohlen, Bootstrap3 direkt gemäß seinen Entwicklungsdokumenten zu verwenden. Dieser Artikel wird auch basierend auf Bootstrap3 erstellt. Gleichzeitig muss der von Bootstrap3 bereitgestellte JavaScript -Effekt von jQuery1.11 unterstützt werden (klicken Sie auf, um den Link zu öffnen). Sie können JQuery1.11 (klicken, um den Link zu öffnen) herunterladen, kompatibel mit dem alten Browser IE6 (klicken, um den Link zu öffnen) von der offiziellen Jquery -Website anstelle von JQuery2 (klicken, um den Link zu öffnen) im alten Browser IE6. Konfigurieren Sie nach dem Herunterladen das Site -Verzeichnis. Dekompress Bootstrap3 direkt in das Site-Verzeichnis und platzieren Sie JQuery-1.11.1.js im JS-Verzeichnis, dh demselben Verzeichnis wie Bootstrap.js. Die Struktur des Standortordners ist ungefähr wie folgt:
2. Der Code dieser Webseite ist wie folgt und die folgenden Fragmente werden analysiert:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"><Htmlmlml xmlns = "http://www.w3.org/1999/xhtml"> <kopf> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> modal box </tithes> <meta name = "view". content="width=device-width,initial-scale=1.0,user-scalable=no"> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src = "js/bootstrap.js"> </script> </head> <body> <p> <a data-toggle = "modal" data-target = "#myModal"> Servicevereinbarung </a> </p> <p> <button type = "button" data-toggle = "modal" data-target = "#"#"#"#myModal "> klicken Sie hier. ID = "MYMODAL" ROLLE = "Dialog"> <div> <div> <div> <button type = "button" data-dismiss = "modal"> <span> × </span> </button> <h4 id = "MYMODALLABEL"> Servicevereinbarung </h4> </div> <div> <palign = "center" text text text text tection "text text text text text tection"> < Wirkung. Die Nutzungsbedingungen dieser Vereinbarung haben rechtliche Auswirkungen. Die Nutzungsbedingungen dieser Vereinbarung haben rechtliche Auswirkungen. Die Nutzungsbedingungen dieser Vereinbarung haben rechtliche Auswirkungen. </textArea> </p> </div> <div> <p Align = "center"> <schalttyp = "button" data-dismiss = "modal"> ok </button> </p> </div> </div> </div> </div> </div> </body> </html>> </div> </div> </body> </html>
(1) <kopf> Teil
<Head> <!-Page Codierung-> <meta http-äquiv = "content-type" content = "text/html; charSet = utf-8"/> <titels> Modal Box </title> <!-Erfordern Sie diese Webseite, um automatisch an den Bildschirm von PC, Tablet, Mobilfunk und andere Geräte-> <meta name zu sein = "Ansicht". content = "width = Gerätebreite, initial-scale = 1.0, user-scalable = no"> <! type = "text/javaScript" src = "js/bootstrap.js"> </script> </head>
(2) Links und Schaltflächen, die ursprünglich auf der Webseite angezeigt wurden
<p> <!-data-toggle = "modal" data-target = "#myModal" erfordert das offene Modal-Box von MyModal-> <a data-toggle = "modal" data-target = "#myModal"> Serviceabkommen </a> </p> <p> <! -> <Schaltfläche type = "button" data-toggle = "modal" data-target = "#myModal"> Klicken Sie hier, um die Servicevereinbarung zu lesen </button> </p>
(3) Modal Box -Teil
Die Grundlagen von Modalboxen sind wie folgt:
Daher wird der folgende Code gefunden:
<!-class = "modal fade" erfordert, dass die Modal-Box mit einem Animationseffekt-Fade geöffnet werden kann. Class = "Modal" ist auch in Ordnung, aber es wird sehr abrupt geöffnet. ID = "MYMODAL" spiegelt den obigen Hyperlink und die Schaltfläche an-> <div id = "myModal" rollen = "Dialog"> <div> <!-Das modale Box-Layout muss nach dem Modal-Content durchgeführt werden. -> <div> <div> <!-Dies ist der Titelteil des Modal-Boxs mit einem Semikolon von × und dem Transfercharakter mit ×, was im Wesentlichen ein Schließknopf ist-> <Button type = "button" data-dismiss = "modal"> <span> × </span> </button> <! <Div> <!-Dies ist der Hauptteil des Modalfelds, das in ein schreibgeschütztes Textfeld mit einer Reihe von Zeilen von 3. Das Textfeld eingebettet ist. Das Textfeld befindet sich im Hauptteil des Modalfelds. Ohne ein Textfeld ist es in Ordnung, aber der Inhalt wird dem Benutzer gleichzeitig präsentiert. Warum also nicht einfach das Fenster hochholen? -> <P Align = "Center"> <textarea rows = 3 readonly = "true" /> Die Bedingungen für diese Vereinbarung sind rechtlich effektiv. Die Nutzungsbedingungen dieser Vereinbarung haben rechtliche Auswirkungen. Die Nutzungsbedingungen dieser Vereinbarung haben rechtliche Auswirkungen. Die Nutzungsbedingungen dieser Vereinbarung haben rechtliche Auswirkungen. </textarea> </p> </div> <div> <!--This is the tail of the modal box, and a centered OK button is placed--> <p align="center"> <button type="button" data-dismiss="modal"> OK</button> </p> </div> </div> </div> </div> </div> </div>
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.