Tutorial jQuery : Membuat Alert Dialog Box Dengan jQuery

Akhirnya, ada juga waktu kosong untuk menulis lagi di blog ini. Dan lagi-lagi saya akan membahas tentang jQuery  (#hehe). Mudah-mudahan kawan-kawan yang berkunjung kesini tidak bosan untuk membaca postingan saya akhir-akhir ini yang isinya tentang framework Javascript yang tengah naik daun tersebut. Kali ini, saya akan menjelaskan sedikit tentang pembuatan alert dialog box dengan jQuery. Hmm, kedengarannya memang sangat sederhana. Namun, pernah gak kita memperhatikan sebuah dialog box entah itu berupa alert box maupun confirmation box, yang berubah-ubah tampilannya di setiap browser? Yupz, dengan sebuah plugin jQuery kita dapat membuat dialog box yang tampilannya sama di semua browser dan tentunya bisa di-kustomasi sesuai selera kita melalui file css. Nama plugin-nya ialah jQuery Alert, yang ukuran file-nya hanya 7 kb. Contoh penggunaannya, kira-kira seperti di bawah ini :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.alerts.js"></script>
<script type="text/javascript">

		$(document).ready( function() {

			$("a#alert_button").click( function() {
				jAlert('Menampilkan alert dialog box yang berisi peringatan.', 'Alert Dialog Box');
			});

			$("a#confirm_button").click( function() {
				jConfirm('Apakah anda ingin menghapus data ini?', 'Confirmation Dialog Box', function(r) {
					if( r ) jAlert('Data berhasil dihapus', 'Confirmation Dialog Box Results | True')
					else jAlert('Data tidak jadi dihapus.', 'Confirmation Dialog Box Results | False');
				});
			});

			$("a#prompt_button").click( function() {
				jPrompt('Ketikkan kata pada textbox di bawah ini :', 'Masukkan Kata....', 'Prompt Dialog Box', function(r) {
					if( r ) jAlert('Kata yang anda masukkan : <b>' + r + '</b>', 'Dialog Box Results');
				});
			});

		});

</script>

Itu baru fungsi untuk memanggil plugin jQuery Alert-nya saja, dan untuk memanggilnya melalui sebuah link, bisa menggunakan syntax html seperti di bawah ini :

<div>
<p><a href="#" id="alert_button">Alert Dialog</a></p>
<br />
<p><a href="#" id="confirm_button">Confirm Dialog</a></p>
<br />
<p><a href="#" id="prompt_button">Prompt Dialog</a> </p>
</div>

Dan hasil jadinya seperti di bawah ini :

OK deh, sekian dulu postingan pendek đŸ˜€ saya kali ini. Semoga bisa bermanfaat untuk rekan-rekan yang kebetulan ingin mencari tampilan yang berbeda dalam menampilkan alert dialog box.

Happy Blogging and Keep Coding

Cheerrrsss….!!!!

Download Aplikasi

5 comments

  1. Ratna Reply

    Tutorialnya keren Mas.Tp Bs ga y bantu saya…?.ga paham bgt msalah javascript.please…

    function requestbCallack(response)
    {
    if(response) {
    location.href=’step2.php’;
    } else {
    //BAGAIMANA CARA MELETEAKKAN jQUERY DI SINI…??
    }

    • Gede Lumbung Post authorReply

      sekalian aja functionnya dibuat sesuai aturannya jquery mbak
      gak usah pake yg native seperti di atas

  2. Ratna Reply

    Haduh…!.Bahasanya ga paham mas.maklum newbie berat….! :).tp memungkinkan ya untuk di buat sprti itu.mksudnya alert di buat lebih cantik dgn jquery…?

  3. Owie Reply

    kang,, sy lagi nyari tutor popup pake jquery..
    nah kbtulan pas bgt mampir ke blog akang ^_^
    saya mau tanya kang.. gimana kalo “Prompt Dialog” it dibuat 2 kolom [username & password]
    terus ketika di klik “OK” cek ke DB ada ga [username & password] yg dimasukkan tadi, kalo ada n cocok baru masuk ke program selanjutnya..

    haturnuhun kang.. maaf sy masih culun jquery ^_^

  4. Jek Reply

    gan mau nanya dong? pan ane pake CI tuh gan, ane mau ngambil gambar di base url di css. Gimana caranya gan? makasih sebelumnya.