JQuery Mobile : Popup

Popup memiliki kesamaan dengan dialogbox. Bedanya adalah sebuah Popup dapat digunakan untuk menampilkan text, photo, maps dan konten lainnya. Untuk membuat sebuah popup gunakan elemen <a>dan elemen <div>. Pada elemen <a> tambahkan data-rel=“popup” dan href id. Pada elemen <div> tambahkandata-role=“popup” dan id yang akan dipanggil olehelemen <a>.

Disini kita menggunakan HP Android Xiaomi 4-C sebagaitest running device

JENIS-JENIS POPUP

Closing Popup

Secara default popup dapat di close dengan klik area diluar kotak popup atau dengan menekan tombol “Esc”. Jika kita tidak ingin popup tertutup dengan cara klik areadiluar kotak popup, dapat dilakukan dengan menambahkan data-dismissible=“false” .

Kita juga dapat menambahkan close button pada popup.

Posisi Popup dapat diatur dengan menggunakan data-position diantaranya :

Arrow

Untuk menambahkan arah panah pada border popup dapat dilakukan dengan data-arrow, dengan value “l” ( left ) “t” ( top ) “r” ( right ) “b ( bottom )

Transitions

Secara default  popup tidak memiliki transisi efek, namun kita dapat menambahkannya dengan cara data-transition=“value”

Dialog

Kita dapat menambahkan standard dialog markup kedalam popup ( header, content dan footer )

Popup Photo

Kita juga dapat menambahkan photo

Overlay

Kita dapat mengatur warna background dibalik popup, dengan data-overlay-theme

Data-overlay-theme=“a” untuk light overlay

Data-overlay-theme=“b” untuk dark overlay

download untuk unduh materi JQuery Mobile : Popup

DISINI!