Fügen Sie dem Seiteninhalt ein kleines Overlay hinzu, genau wie die Auswirkungen auf das iPad und fügen Sie Seitenelementen zusätzliche Informationen hinzu.
Pluginabhängigkeiten
Die Popup-Box hängt vom Tooltip-Plugin ab, sodass das Tooltip-Plugin zuerst geladen werden muss.
Selektive Additionsfunktion
Bei Leistungsüberlegungen werden die Datenattribut-API von Tooltips und Popup-Komponenten optional hinzugefügt, sodass Sie sie selbst initialisieren müssen.
Zusätzliche Einstellungen sind erforderlich, wenn Popup-Boxen in Schaltflächengruppen und Eingabefeldgruppen verwendet werden
Wenn die Eingabeaufforderung in Verbindung mit .BTN-Gruppen oder .Input-Gruppen verwendet wird, müssen Sie die Option "Körper" angeben (siehe Dokumentation unten), um unerwünschte Nebenwirkungen zu vermeiden (zum Beispiel, wenn das Popup-Box angezeigt wird, können die Seitenelemente, die damit zusammenarbeiten, weiter oder rund).
Wenn Sie Popup-Boxen für verbotene Seitenelemente verwenden, müssen Sie ein zusätzliches Element hinzufügen, um es abzuschließen
Um einem deaktivierten oder abgeschlossenen Element ein Popup -Feld hinzuzufügen, wickeln Sie das Seitenelement ein, das dem Popup -Feld in einem <div> hinzugefügt werden muss, und wenden Sie dann ein Popup -Feld auf dieses <Div> -Element an.
1. statische Fälle
4 Optionale Optionen: Oben, rechts, unten und linke Anordnung.
Codesegment
.BS-Example {Border-Color: #DD; Border-Radius: 4px 4px 0 0; Randbreit: 1PX; Box-Shadow: Keine; Rand-Links: 0; Rand-Rechts: 0; Grenzstil: solide; } .bs-example-popover .popover {Position: relativ; Anzeige: Block; float: links; Breite: 240px; Rand: 20px; }<h1> 3. Popup -Box </h1> <div> <div> <div> </div> <h3> Popover -Top </h3> <div> <p> SED POSUERE CROSKEKETUR EST AT LOBORTIS. Aenean EU Leo Quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean EU Leo Quam. Pellentesque ornare sem lacinia quam venenatis. Aenean EU Leo Quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean EU Leo Quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean EU Leo Quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. </P> </div> </div> </div> </div> </div>
Vorschaueffekt
Code -Snippet:
<a href = "javaScript: void (0)" id = "a_pop" data-placement = "boden" data-content = "Der Wind und der Regen sind wie die Zeit damit, das weiße Pferd einzuholen. Wenn wir von der ganzen Welt abweichend sind, blasen die Schneeflocken die Haare. Sie haben einmal gesagt, dass Sie nicht für immer zusammen sein sollten, und jetzt möchte ich fragen, ob Sie nur ein kindliches Sprichwort sind, unschuldige Jahre können es nicht ertragen, Jugendliche zu täuschen. Ich werde dir gerecht werden. Der schwere Schnee bitte löscht bitte die Spuren unseres zusammen zusammen. Der starke Schnee kann die Markierungen, die wir uns gegenseitig geben, nicht löschen. Heute Abend ist das Gras getrennt und die helle Mondnacht schickt Ihnen Tausende von Meilen, um auf den Herbstwind zu warten. "
<strong> JS -Initialisierung: </strong> <script type = "text/javaScript"> $ ("#a_pop"). popover (); </script>Vorschaueffekt:
Beachten Sie, dass bei Angabe einer Platzierung besondere Aufmerksamkeit auf Richtungsfragen achten. Da die Popup-Box mit der Mitte des Trigger-Ereigniselements auftaucht, wird sie wahrscheinlich überschrieben und kann nicht alle angezeigt werden.
Das A -Tag -HREF -Attribut im Code muss als JavaScript angegeben werden: void (0), um den Link -Effekt zu entfernen.
Vier Richtungen:
Code
<a href = "javaScript: void (0)" id = "a_pop1" Daten-Placement = "links" Datenbekämpfung = "Der Wind und der Regen verbringen Zeit, um das weiße Pferd einzuholen. Halten Sie immer noch Ihren Schlaf in Ihrer jungen Palme? > Links </a> <a href = "javaScript: void (0)" id = "a_pop2" data-placement = "top" data-content = "Wir sagten, wir sollten uns nicht trennen und wir sollten immer zusammen sein, selbst wenn wir mit der Zeit Feinde sind, selbst wenn wir uns von der Welt, die winddurchdringlich sind, gefährden. Data-Original-Title = "Zeit zum Boil Rain"> ober </a> <a href = "javaScript: void (0)" id = "a_pop3" data-placement = "boden" data-content Worte des Kindes. " Data-Original-Title = "Zeit zum Kochen des Regens"> niedriger </a> <a href = "javaScript: void (0)" id = "a_pop4" data-Placement = "Right" Data-Content = "Die unschuldigen Jahre können nicht ertragen, um Jugendliche zu täuschen. Heute Abend verlässt das Gras den hellen Mond und sendet Ihnen Tausende von Meilen, um im nächsten Jahr auf den Herbstwind zu warten. $ ("#a_pop2"). popover (); $ ("#a_pop3"). popover (); $ ("#a_pop4"). popover (); </script>Vorschaueffekte;
2. Optionen
Optionen können durch Dateneigenschaften oder JavaScript weitergeleitet werden. Für das Datenattribut müssen Sie den Optionsnamen nach Daten einfügen, z. B. Data-Animation = "".
Anwenden Sie Dateneigenschaften auf ein einzelnes Popup-Box
Für ein einzelnes Popup -Box können Sie die Optionen separat über die Dateneigenschaft angeben, wie oben gezeigt.
3. Methode
$ (). Popover (Optionen)
Initialisiert die Popup-Box für eine Reihe von Elementen.
.popover ('show')
Zeigt die Popup-Box an.
$ ('#element'). popover ('show')
.popover ('Hide')
Verstecken Sie die Popup-Box.
$ ('#Element'). Popover ('Hide')
.popover ('Toggle')
Zeigen oder verstecken Sie die Popup-Box.
$ ('#Element'). Popover ('Toggle')
.popover ('zerstören')
Pop-up-Box verstecken und zerstören.
$ ('#element'). popover ('zerstören')
Iv. Ereignisse
$ ('#mypopover'). on ('Hidden.bs.popover', function () {// etwas tun…})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 dreht sich alles um diesen Artikel. Ich hoffe, es wird für alle hilfreich sein, die Bootstrap-Popup-Box zu lernen und zu beherrschen.