Cara Membuat popups pada jquery mobile

00.06 Education , jquery , jquery mobile , mobile , popup , popups , STT Ibnu Sina Batam 0 Comments

Kampus STT Ibnu Sina Batam "Kampus Unggulan" Berbasis Imam dan Tagwa
Gabung dengan kami, di Stt-Ibnusina.ac.id

Sering kita jumpai sebuah kotak yang muncul saat membuat suatu halaman website atau saat menekan tombol tertentu itulah yang dinamakan popup.
Berikut adalah jenis-jenis popup dan coding untuk membuatnya :

SIMPLE POPUPS / BASIC POPUP

Simple pop up merupakan pop up standard atau pop up basic dari suatu web. Untuk membuat popup, tambahkan atribut data-role="popup" ke sebuah div dengan popup konten, lalu buat link dengan set href ke id popup div dan tambahkan atribut data-rel="popup" untuk membuat framework membuka popup jika link di tap/klik.

Berikut contoh coding dari simple popup :

Dan Hasilnya jika dijalankan menggunakan Lenovo a6010 :
CLOSING POPUPDefaultnya popup bisa ditutup dengan mengklik diluar jendela popup atau bisa juga dengan klik Esc. Namun ada cara agar popup tidak tertutup jika kita klik di daerah selain tombol close.
yaitu dengan menambahkan atribut data-dismissable="false", untuk membuat tombol closenya, tambahkan atribut data-rel="back" dan untuk posisi tombol close dirubah melalui via a class.

Berikut contoh coding dari closing popup :

Dan Hasilnya jika dijalankan menggunakan Lenovo a6010 :
POSITIONING POPUP

Jika ingin membuat popup muncul dengan window, tambahkan data-position-to atribut ke link.

Berikut contoh coding dari positioning popup :

Dan Hasilnya jika dijalankan menggunakan Lenovo a6010 :
DIALOG POPUP

Text Dialog bisa ditambahkan dalam sebuah popup. untuk membuat popup dengan dialog style, tambahkan data-dismissible="false" atribut ke dalma popup untuk menghindari klik diluar area popup untuk meng close. jadi untuk menutup sebuah dialog popup ini user harus klik pada tombol close.

Berikut contoh coding dari Dialog Popup :

Dan Hasilnya jika dijalankan menggunakan Lenovo a6010 :
IMAGE POPUP

Popup juga bisa dibuat menggunakan sebuah image. dengan cara tambahkan data-overlay-theme="b" atribut untuk menambah backdrop gelap dibelakang foto.

Berikut contoh coding dari Image Popup :

Dan Hasilnya jika dijalankan menggunakan Lenovo a6010 :