Modal JQuery

Assalammualaikum Wr. Wb.

Kali ini saya akan sharing mengenai Modal pada JQuery. apa itu Modal?, bagaimana cara membuatnya?....untuk lebih lengkapnya kita simak pembahasanannya saja yaa....

A. PENDAHULUAN
  • Pengertian
Modal merupakan suatu efek pada JQuery dimana kita dapat memberikan efek timbul atau efek dialog. 
  • Latar Belakang
Ingin Menerapkan Modal pada project minggu lalu
  • Maksud dan Tujuan
Dapat Menerapkan dan menggunakan Modal pada project minggu lalu.

B. ALAT DAN BAHAN
  • Text Editor
  • Web Browser
  • JQuery (Salah satu library Javascript)
C. JANGKA WAKTU PELAKSANAAN
  • Sekitar 1-2 jam
D. RANGKAIAN KEGIATAN 
  • Definisi Efek Modal
Modal adalah suatu efek yang digunakan untuk memberi efek timbul pada suatu website, Modal ini berada di JQuery dan Bootstrap, dan mungkin ada di lain lagi, namun karena saya belum mengetahui, saya sementara hanya menyimpulkan Bootstrap dan JQuery saja. di dalam Modal tersebut biasanya terdapat sebuah teks penting atau berisi peringatan seperti alert.'

berikut merupakan contoh penulisan modal dengan JQuery:




  • Penerapan Modal JQuery pada Project kemarin
pertama tama kita buat file berekstensi .php, kenapa file php?, karena file ini nantinya ada sebuah fungsi dimana kita memanggil file php lain ke dalam file php kita ini. kemudian setelah file nya dipanggil, kita buat tag div dengan class berikut...


kemudian kita tambahkan script JQuery nya.
 


kemudian atur nama class yang berada di file include an tadi. karena disini saya memanggil 3 file .php, maka class yang berada di ketiga file .php include an kita tadi juga harus sesuai, seperti berikut.

file data_sekolah.php


file data_siswa.php



file data_spp.php



 dan untuk tampilannya, kita tambahkan css, dengan script sebagai berikut...
 


E. HASIL YANG DIDAPATKAN
  • Dapat menggunakan modal dengan dukungan JQuery.
F. TEMUAN PERMASALAHAN
  • Sempat kebingungan dengan konsep modal yang memanggil modal di file lain, namun setelah dicoba ternyata sama saja.
G. KESIMPULAN
  • Kita dapat membuat modal pada suatu tag HTML dengan menggunakan JQuery (Bootstrap juga)
H. REFERENSI
  • MalasNgoding

Sekian sharing yang dapat saya sampaikan hari ini....
semoga bermanfaat....

Wassalammualaikum Wr. Wb.