Membuat Tombol Close Popup di jQuery Mobile

Popup memiliki kesamaan dengan dialog box. Bedanya popup box bisa menampilkan konten berupa text, photo, map dan kontent lainnya. Secara default popup hanya sebuah box biasa yang muncul jika kita melakukan klik. Hari ini saya akan mengajarkan bagaimana cara membuat tombol close pada popup. Cara menambahkan tombol close hampir sama dengan cara menambahkan icon pada tombol tetapi ada class yang harus kita tambahkan agar tombol tersebut menyatu dengan popup.

Silahkan ketik script berikut :

data-positon-to="window" mendefinisikan popup akn ditampilkan tepat ditengah halaman. ui-icon-delete merupakan icon close, ui-btn-icon-notext mendefinisikan icon tanpa text. Coba perhatikan <a> Close </a>, text close tidak akan ditampilkan. ui-btn-right merupakan posisi tombol close yakni berada disebelah kanan. ui-corner-all mendefinisikan icon akan ditampilkan berupa lingkaran.

Simpan script html diatas dan coba jalankan pada browser mobile anda maka akan terlihat seperti berikut :

Baca juga Membuat Button dengan Teks dan Icon di Jquery Mobile