Membuat Obrolan Box Sederhana Dengan Alert

Beberapa waktu yang kemudian aku sudah pernah memposting cara menciptakan obrolan box dengan memakai fungsi toggle yang diadopsi dari tutorialnya Kang Ismet. Dalam pembuatannya agak sedikit rumit alasannya ialah kodenya tidak mengecewakan banyak. Nah kali ini aku akan share cara menciptakan obrolan box yang lebih sederhana dengan aba-aba yang cukup sedikit dengan fungsi alert dan onclick pada tombolnya.

Baca juga: Membuat Dialog Box Dengan Penambahan Fungsi Toggle

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

Kode untuk membuatnya cukup sederhana dan terbilang sedikit menyerupai 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 tiba 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');"/>

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

Sangat sederhana bukan? Dan aba-aba di atas sudah valid HTML5.

Sumber https://www.kompiajaib.com/

Share this post