Sabtu, 25 Oktober 2008

Script costum dialog box gratis

Lagi ada tugas nih, boss maunya yang aneh-aneh saja. Padahal saya kan baru di bidang ini. Boss maunya dialog box/modal box layer style, maksudnya di dialog box itu kita tampilkan file .php dengan ajax. Pernah sih lihat web dengan tampilan seperti itu, tapi scriptnya di compress, jadi susah deh bacanya.

Mau bikin sendiri, kayaknya susah banget deh. Mendingan tanya ama profesor GOOGLE, pasti dia tau. Setidaknya ada petunjuk dikit ato contoh ato script gratisan hehehehehhee.......
Akhirnya dapet juga, yang ini gratis lho
http://www.wildbit.com/labs/modalbox/

tampilannya juga lumayan, ada transisinya, overlay opacity juga bisa diatur
cara pakainya juga gampang
  1. Tambahkan file javascript di bawah ini di halaman anda:
    <script type="text/javascript" src="includes/prototype.js"> </script>
    <script type="text/javascript" src="includes/scriptaculous.js?
    load=effects"></script>
    <script type="text/javascript" src="includes/modalbox.js"> </script>

  2. Tambahkan file css berikut modalbox.css di halaman anda:
    <link rel="stylesheet" href="includes/modalbox.css" type="text/css"
    media="screen" />

  3. Contoh simple, misalnya anda ingin membuat konfirmasi pada saat menghapus sesuatu :
    Modalbox.show('<div class=\'warning\'><p>Are you sure to delete this¬
    item?</p> <input type=\'button\' value=\'Yes, delete!\'¬
    onclick=\'Modalbox.hide()\' /> or <input type=\'button\'
    value=\'No, leave it!\' onclick=\'Modalbox.hide()\' /></div>',¬
    {title: this.title, width: 300}
  4. Contoh simple, misalnya anda ingin menampilkan file anda pada dialog box tersebut :
    <a href="_ajax_form.html" title="Modalbox without transitions" ¬
    onclick="Modalbox.show(this.href, {title: this.title, transitions: false}); ¬
    return false;">Modalbox with ajax</a>

Dan banyak lagi contoh-contoh yang ada disana, terlampir di dalam package.

Selamat mencoba