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.

You Might Also Like:

How to style text in Disqus comments:
  • 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 Hide Parser
Disqus Comments