Membuat Dialog Box Sederhana Dengan Alert

Membuat Dialog Box Sederhana Dengan Alert

Bola Hero Gawai

Membuat Dialog Box Sederhana Dengan Alert

Beberapa waktu yang lalu saya sudah pernah memposting cara membuat dialog box dengan menggunakan fungsi toggle yang diadopsi dari tutorialnya Kang Ismet. Dalam pembuatannya agak sedikit rumit karena kodenya lumayan banyak. Nah kali ini saya akan share cara membuat dialog box yang lebih sederhana dengan kode yang cukup sedikit dengan fungsi alert dan onclick pada tombolnya.


Karena ini dibuat dengan fungsi alert maka tampilan dialog box-nya sangat sederhana namun tidak mengurangi fungsinya sebagai kotak pesan atau kotak pengumuman. Yang bisa kita modif hanyalah tampilan tombolnya, seperti tampak pada gambar animasi gif di bawah ini.

Membuat Dialog Box Sederhana Dengan Alert

Kode untuk membuatnya cukup sederhana dan terbilang sedikit seperti tampak di bawah ini.


<input type="button" style="border-radius:4px;cursor:pointer;font-size: 14px;font-family:Arial;font-weight:normal;border: 1px solid #d02718;padding: 2px 8px;text-shadow:1px 1px 0px #810E05;box-shadow:inset 1px 1px 0px 0px #f5978e;background:linear-gradient(180deg, #f24537 5%, #c62d1f 100%);color:#ffffff;display:inline-block;" value="Hi! Click me here" onClick="javascript:alert('Selamat datang di blog Kompi Ajaib. Semoga Anda menemukan apa yang Anda cari. Tentang Kompi Ajaib silahkan klik tombol OK');window.open(url='http://www.kompiajaib.com/p/about-kompi-ajaib.html');"/>

Live Demo


Kode style="......" adalah kode untuk mengatur tampilan tombolnya. Dan isi dialog boxnya simpan pada kode onClick="javascript:alert('........') serta kode window.open(url='.....') adalah untuk menyimpan link tujuan klik pada tombol OK/close. Dan jika tidak ingin menyertakan link pada tombol OK/close maka silahkan hapus kode window.open(url='.....').

Sangat sederhana bukan? Dan kode di atas sudah valid HTML5.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

37 Comments Add Comment

ini dialog box versi baru ya mas efeknya muncul d tab baru :) ntar mau saya coba terapkan di halaman pasang iklan, makasih sharingnya mas Adhy :-bd

Balas

Fungsi alert-nya udah lama hhehee :) hanya penambahan style pada button-nya aja :) cuman baru dishare di sini mbak hehehehe...

Balas

Wah sangat menarik mas, lagi lagi baru =D oh iya mas saya mau tanya, gimana ya buat title tag di judul blog? saya bingung nggak jadi-jadi ngasih title tag pada judul blog saya, kasdo.com =( minta bantuannya mas

Balas

menarik sekali Mas cara membuat dialog box sederhana dengan alert seperti itu, semoga bisa suatu hari mencobanya. Ijin save ya mas.

Salam

Balas

kreaktif juga mas adhy heheh... biar lebih nuansa dengan tampilan ini ya mas :)

Balas

Kang agar link tujuan tidak terbuka di tab baru, apakah window.open(url='.....') harus diubah ?
Dan untuk membuat animasi gif, kapan kira-kira ilmunya dishare... :p he...he...

Balas

Dialog box nya keren kang, bisa langsung ngajakin kenalan pula...sayang disonohnya ngga ada gambar adminnya yang kalau dari jauh mah kasep... =)D

Balas

bagus mas adi...

oy mas itu pakai software scsrip apa mas

Balas

Keren mas Adhy :) Akan saya pelajari lagi :D

Balas

Coba cari elemen ini <h1 class='title'> nah silahkan tambahkn title pada link-nya.

Balas

Silahkan mas Indra :)

Balas

Yang jelas biar lebih simple dan mudah dlm membuatnya sis hehehe :)

Balas

Assalamualaikum Kang,,, Punten yeuh nembe mampir :)
Keren Kang dialog blogna, saya coba terapkan nanti.

Balas

Tambahkan kode '_self' dibelakangnya menjadi seperti ini window.open(url='.....','_self')
Ini demonya http://jsfiddle.net/kompiajaib/huLU7/3/show/

Balas

Hehehehe aya-aya wae kang Lembu mah :)

Balas

Itu pakai html editor online JSFiddle mas :)

Balas

Silahkan mas :)

Balas

Wa'alaikum salam kang Heri :) hehehe mangga dicobian :)

Balas

Boleh di coba ne, terima kasih sharingnya

Balas

Sip,... bisa di pakai untuk Call Center :ng

Balas

ikutan nyimak aja Kang Adhy :)

Balas

Sama-sama :) silahkan dicoba :)

Balas

Silahkan mas :)

Balas

Sudah sangat lama yeuh tidak memampir ke rumah kang ady hehe
wah bisa dibikin sesuatu yeuh kang modal box'y

Balas

Waduh ada karuhun nih hehehehe ini mbah kopi itemnya semoga diterima wkwkwkwkw... :ng
ah kang Ruly mah sok kitu hehehehe

Balas

Kreatif banget kang,,

Mampir kang di blog saya yah,, corat coret apa kek, heheee yang pnting mmampir kang. "azhallea"

Balas

Kalau buat notice seperti di blog Kang Ismet itu gimana ya Kang :D

Balas

mas adhi kenapa ya muncul obeng walau ud log out dari blog...mhon pencerahannya...:) biasanya nggak...

Balas

saya cek dengan laptop temen malah tangnya muncul ditempat dia...

Balas

Setelah menambahkan gadget baru selalu hapus quickedit-nya :) lewat edit html

Balas

menarik juga mas, tapi diklik oke malah ke halaman about kompi ajaib :D

Balas

Hehehehe hapus aja kode window.open(url='.....')

Balas

Makasih mas :)

Balas

haha mas firman hilangin dulu linknya kompi ajaib nya, agar tidak kehalaman kompi ajaib.

Balas

keren..mo praktekin ...suwun mas

Balas

kurang ngerti mass

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×