jQuery Komórka pop
Jest to bardzo popularny wyskakujące okienka dialogowe pop można nakładać na wyświetlaczu strony.
Pop-up może być używany do wyświetlania tekstu, zdjęć, map, lub inne treści.
Tworzenie pop i potrzebę wykorzystania <a> <div>. Dodawanie danych rel = "popup" nieruchomości na <a> elementu <div>, aby dodać data-role = atrybut "okienko". Następnie określić identyfikator <div>, a następnie ustaw wartość href Ra <div> określonego identyfikatora. <Div> Zawartość jest wyświetlanie treści pop.
Uwaga: <div> POP i kliknij <a> link musi być na tej samej stronie.
Przykłady
<Div data-role = "popup " id = "myPopup">
<P> Jest to prosty pop </ p>
</ Div>
Spróbuj »
Jeśli trzeba dodać dopełnienie na zewnątrz i z podręcznego można dodać kategorię "ui-content" w <div> w:
Zamknij okienko
Domyślnie kliknięcie pop powierzchnię zewnętrzną lub naciśnij klawisz "Esc", aby zamknąć pop. Jeśli nie chcesz dotknij obszaru poza podręcznego Zamknij okienko można dodać = "false" atrybut danych-dismissible w dodanej (nie zalecane). Można również dodać przycisk Zamknij na pop, używając danych rel = przycisk "wstecz" na nieruchomości, a dzięki stylu kontrolować położenie przycisku.
| opis | Przykłady |
|---|---|
| Przycisk Zamknij po prawej stronie | próbować |
| Przycisk zamykania na lewo | próbować |
| Korzystanie właściwość data-dismissible | próbować |
Pozycjonowanie pop
Domyślnie, wyskakujące okienka pojawi się bezpośrednio nad kliknięcie na element, jeśli chcesz kontrolować pozycję pop, można użyć danych-pozycji-przypisywać do otwierania wyskakujących kliknięcia na link.
Kontrolować lokalizacje pop na trzy sposoby:
| Wartość nieruchomości | opis |
|---|---|
| Dane pozycyjne do "okna" = | Wyskakujące okienka wyświetlane na środku okna |
| Dane pozycyjne do = "# myid" | Wyskakujące okienka wyświetlane na znanych elementach ID |
| Dane pozycyjne-to = "pochodzenie" | Domyślnie. Kliknij na elementach graficznych pop. |
Przykłady
<a href="#myPopup2" data-rel="popup" class="ui-btn" data-position-to="#demo"> id = " demo" </a>
<a href="#myPopup3" data-rel="popup" class="ui-btn" data-position-to="origin"> </a> Origin
Spróbuj »
przejście
Domyślnie pop ma efektu przejścia. Jeśli chcesz, możesz dodać efekty przejścia (za pośrednictwem danych-przejścia = "wartość" atrybut jQuery Komórka Transition ):
Wszystkie wystąpienia efektów przejścia
Spróbuj »
Pop kierunek małe granicy
Jeśli trzeba dodać trochę kierunek pop granicy, można użyć właściwości danych strzałki i określ wartość "L" (z lewej), "t" (u góry), "R" (po prawej) lub "b" (na dole):
Przykłady
<Div data-role = "popup " id = "myPopup" class = "ui-content" Dane strzałki = "l">
<P> w lewo w kierunku granic. </ P>
</ Div>
Spróbuj »
okno pop
można pop wyprodukowany jako standardowego okna (głowy i treści znaku dołu):
Przykłady
<Div data-role = "popup" id = "myPopupDialog">
<Div data-role = "header"> <h1> nagłówku .. </ h1> </ div>
<div data-role = "main" class = "ui-content"> <p> jakiś tekst .. </ p> <a href="#"> linki .. </a>
<Div data-role = "footer"> <h1> na dole tekstu .. </ h1> </ div>
</ Div>
Spróbuj »
Obraz pop
Można wyświetlać obraz w pop:Przykłady
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" alt = "w3big" style = "width: 200px;"> </a>
<Div data-role = "popup" id = "myPopup">
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" style = "width: 800px; height: 400px;" alt = "w3big">
</ Div>
Spróbuj »
Tło cover pop
Można użyć właściwości danych overlay-theme po pop dodać kolor tła.
Domyślnie, obejmujący kolor tła przejrzyste. Wykorzystując dane-overlay-theme = "a", aby dodać jasnego tła, wykorzystania danych overlay-theme = "b" dodaj ciemnej pokrycie background:
Przykłady
<Div data-role = "popup " id = "myPopup" data-overlay-theme = "b">
<P> Za mną jest ciemne tło. </ P>
</ Div>
Spróbuj »
Ogólne tło obrazu często wyskakujące okienka nakładki:
Przykłady
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" alt = "w3big" style = "width: 200px;"> </a>
<Div data-role = "popup " id = "myPopup" data-overlay-theme = "b">
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" style = "width: 800px; height: 400px;" alt = "w3big">
</ Div>
Spróbuj »
Uwaga: W następnym rozdziale dowiesz się, jak korzystać z formularzy w pop.