June 25, 2016

Membuat draggable modal bootstrap

Share this
  •  
  •  
  •  
  •  
  •  
  •  

Assalamualaikum wr wb, pada kesempatan kali ini saya akan share tentang bagaimana cara membuat draggable modal bootstrap. Modal bootstrap memberikan kita kemudahan untuk dapat menampilkan sebuah layout tanpa harus berpindah halaman, sehingga kita dapat memproses beberapa perintah sekaligus dalam satu halaman. Tapi ada kalanya pada saat kita memanggil modal, kita perlu melihat data pada layout yang awal dan secara default modal bootstrap dapat dipanggil tapi tidak dapat di drag alias tidak dapat di geser.

Membuat draggable modal bootstrap

Untuk membuat modal bisa digeser-geser kita perlu menambahkan library tambahan dari jQuery Ui. Jquery Ui merupakan library yang di buat menggunakan javascript yang untuk membuat aplikasi kita lebih interaktif. Jquery menyediakan efek-efek pada layout, widget seperti kalender yang bisa kita gunakan untuk melengkapi aplikasi yang kita buat.

Kita download terlebih dahulu library dari Jquery Ui dari website resminya disini. Pada tutorial kali ini saya menggunakan framework yii2, untuk menggunakan standart library nya, cukup kita kopikan jquery-ui.min.js pada folder web.

Membuat draggable modal bootstrap

Membuat draggable modal bootstrap

Eksekusi Code

Pada AppAsset.php kita tambahkan/ register library tersebut supaya bisa di load saat aplikasi di panggil.

catatan :

Skrip diatas terdapat library summernote, karena saya menggunakan aplikasi yang sama pada tutorial sebelumnya.

Pada skrip javascript yang di gunakan untuk menampilkan modal kita tambahkan skrip .draggable().

Anda juga dapat menambahkan opsi pada fungsi draggable tersebut, kali ini saya tambahkan opsi agar modal dapat di geser hanya kalau di klik pada modal header.

Coba kita lihat hasilnya, posisi normal.

Membuat draggable modal bootstrap

Membuat draggable modal bootstrap

draggable :D.

Membuat draggable modal bootstrap

Membuat draggable modal bootstrap

Sekian tutorial singkat saya ini mengenai cara Membuat draggable modal bootstrap. Semoga dapat membantu dan bermanfaat, terima kasih.

Agus Wiji Suhariono

Memulai menulis Blog pada bulan November dari Tahun 2015. Penulis merupakan alumni dari Politeknik Negeri Malang angkatan 2011 Program Studi Manajemen Informatika, Jurusan Elektro. Penulis memulai menekuni dunia programming mulai tahun 2014 dan sekarang bekerja di Pemerintahan sebagai IT Staff.

You may also like...