Najlepszy samouczek jQuery Komórka pop W 2024 r. W tym samouczku możesz dowiedzieć się Przykłady,Przykłady,Zamknij okienko,Pozycjonowanie pop,Przykłady,przejście,Wszystkie wystąpienia efektów przejścia,Pop kierunek małe granicy,Przykłady,okno pop,Przykłady,Obraz pop,Przykłady,Tło cover pop,Przykłady,Przykłady,

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

<A Href = "# myPopup" data-rel = "popup" class = "ui-btn ui-btn-inline ui-corner-all"> wyświetlanych pop </a>

<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:

Przykłady

<Div data-role = "popup " id = "myPopup" class = "ui-content">

Spróbuj »

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="#myPopup1" data-rel="popup" class="ui-btn" data-position-to="window"> Okno </a>
<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

<a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade"> Fade </a>

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

<a href="#myPopup" data-rel="popup" class="ui-btn"> otwarta pop </a>

<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

<a href="#myPopupDialog" data-rel="popup" class="ui-btn"> Otwórz okno pop </a>

<Div data-role = "popup" id = "myPopupDialog">
<Div data-role = "header"> <h1> nagłówku pl </ h1> </ div>
<div data-role = "main" class = "ui-content"> <p> jakiś tekst pl </ p> <a href="#"> linki pl </a>
<Div data-role = "footer"> <h1> na dole tekstu pl </ h1> </ div>
</ Div>

Spróbuj »

Obraz pop

Można wyświetlać obraz w pop:

Przykłady

<a href="#myPopup" data-rel="popup" data-position-to="window">
<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

<a href="#myPopup" data-rel="popup"> Pokaż Popup </a>

<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

<a href="#myPopup" data-rel="popup" data-position-to="window">
<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.

jQuery Komórka pop
10/30