Tolong pilih kategori sesuai, jenis posting (diskusi atau bukan) dan sertakan tag/topik yang sesuai seperti komputer, java, php, mysql, dll. Promosi atau posting tidak pada tempatnya akan kami hapus!
- Bagi Anda yang ingin mendaftar, baca link berikut:
http://diskusiweb.com/discussion/50491/how-to-registrasi-diskusiweb-com-baca-ini-terlebih-dahulu
- Cara menyisipkan kode program supaya tampil rapi dan terformat dengan baik di diskusiweb.com: http://www.diskusiweb.com/discussion/50415/cara-menyisipkan-kode-program-di-diskusiweb-com
- Cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

[ASK] Seputar JQuery Dialog

Dear master..

Saya mau tanya seputar JQuery Modal Dialog. Sebelumnya saya punya script seperti ini :


<!DOCTYPE html> <html> <head> <title>Membuat modal dialog dengan JQuery</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> </head> <style> body{ background: #ecf0f1; font-family: sans-serif; font-size: 11pt; } #modal-kotak{ margin:15% 30% 30% 40%; position: absolute; min-width: 200px; position:fixed; z-index:1002; display: none; background: white; } #isi_modal{ font-size: 11pt; padding: 20px; height: 80%; } #close{ background: #fff; font-weight: bold; } #tombol-tutup{ background: #e74c3c; float : right; } #tombol-tutup,#tombol{ height: 30px; color: #fff; border: 0px; } #bg{ opacity:.60; position: absolute; display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: #000; z-index:1001; opacity: 0.6; } #tombol{ background: #e74c3c; } </style> <body> <center><h1>Membuat modal dialog dengan JQuery</h1></center> <button id="tombol">KLIK SAYA !!</button> KLIK TOMBOL UNTUK MENAMPILKAN MODAL DIALOG <div id="bg"></div> <div id="modal-kotak"> <div id="close"> <button id="tombol-tutup">X</button> </div> <div id="isi_modal"> ISI </div> </div> <script type="text/javascript"> $(document).ready(function(){ $('#tombol').click(function(){ $('#modal-kotak , #bg').fadeIn("fast"); }); $('#tombol-tutup').click(function(){ $('#modal-kotak , #bg').fadeOut("fast"); }); }); </script> </body> </html>


It works dan ga ada masalah. Lalu saya kembangkan menjadi bentuk tabel seperti ini :



<!DOCTYPE html> <html> <head> <title>Membuat modal dialog dengan JQuery </title> <!-- <script src="https://code.jquery.com/jquery-1.12.4.js"></script> --> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> </head> <style> body{ background: #ecf0f1; font-family: sans-serif; font-size: 11pt; } #modal-kotak{ margin:15% 30% 30% 40%; position: absolute; min-width: 200px; position:fixed; z-index:1002; display: none; background: white; } #isi_modal{ font-size: 11pt; padding: 20px; height: 80%; } #close{ background: #fff; font-weight: bold; } #tombol-tutup{ background: #e74c3c; float : right; } #tombol-tutup,#tombol{ height: 30px; color: #fff; border: 0px; } #bg{ opacity:.60; position: absolute; display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: #000; z-index:1001; opacity: 0.6; } #tombol{ background: #e74c3c; } </style> <body> <center><h1>Membuat modal dialog dengan JQuery </h1></center> <table border="1"> <tr> <th>KLIK TOMBOL UNTUK MENAMPILKAN MODAL DIALOG</th> </tr> <?php for ($i=1; $i<=3 ; $i++){ ?> <tr> <td> <button id="tombol"><?php echo $i.". "; ?>KLIK SAYA !!</button> <div id="bg"></div> <div id="modal-kotak"> <div id="close"> <button id="tombol-tutup">X</button> </div> <div id="isi_modal"> ISI <?php echo " ".$i; ?> </div> </div> <script type="text/javascript"> $(document).ready(function(){ $('#tombol').click(function(){ $('#modal-kotak , #bg').fadeIn("fast"); }); $('#tombol-tutup').click(function(){ $('#modal-kotak , #bg').fadeOut("fast"); }); }); </script> </td> </tr> <?php } ?> </table> </body> </html>


Yang terjadi hanya nomor 1 saja yang jalan dan itupun semua data keluar (tidak per baris). Apakah harus ditambah array ? Sorry saya pemula.

Mohon pencerahanya master supaya Dialog yang muncul bisa sesuai yg kita pilih.



Thanks.

Comments

  • edited February 7
    ini aja pegangan elo :
    di 1 (satu) halaman HTML, tidak boleh ada element yg punya ID kembar jika ID itu diniatkan akan dipergunakan sebagai rujukan.

    jika dipaksakan, maka hanya element pertama yg ditemukan yg bakal dipake.
    dari koding elo yg terakhir, setumpuk ID bakal kembar semua.
    soalnya ada di dalam loop.

    id="tombol"
    id="bg"
    id="modal-kotak"
    id="tombol-tutup"
    id="isi_modal"

    $('#tombol').click(function(){...});
    cuma akan dilekatkan di element dgn ID "tombol" pertama yg ditemukan.

    kalo mau pake rujukan yg bisa kembar, pake CLASS, bukan ID

    dan itu pun ndak semua harus di ulang.
    bg itu cukup ada 1.

    kalo pake alur elo serba salah ...

    kalo ID dibedakan, CSS elo melekat ke ID.

    kalo pake CLASS, di koding dialog elo ndak menyebut element mana yg berelasi dgn event nya.
    kalo pake CLASS, ndak perlu koding nya diulang-ulang.

    ya emang harus diubah ...
    <!DOCTYPE html>
    <html>
    <head>
    <title>Membuat modal dialog dengan JQuery </title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    </head>
    <style>
    body{
    background: #ecf0f1;
    font-family: sans-serif;
    font-size: 11pt;
    }
    .modal-kotak{
    margin:15% 30% 30% 40%;
    position: absolute;
    min-width: 200px;
    position:fixed;
    z-index:1002;
    display: none;
    background: white;
    }
    .isi_modal{
    font-size: 11pt;
    padding: 20px;
    height: 80%;
    }
    .close{
    background: #fff;
    font-weight: bold;
    }

    .tombol-tutup{
    background: #e74c3c;
    float : right;
    }
    .tombol-tutup,.tombol{
    height: 30px;
    color: #fff;
    border: 0px;

    }
    #bg{
    opacity:.60;
    position: absolute;
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index:1001;
    opacity: 0.6;
    }
    .tombol{
    background: #e74c3c;
    }
    </style>
    <body>
    <center><h1>Membuat modal dialog dengan JQuery </h1></center>
    <div id="bg"></div>
    <table border="1">
    <tr>
    <th>KLIK TOMBOL UNTUK MENAMPILKAN MODAL DIALOG</th>
    </tr>
    <?php
    for ($i=1; $i<=3 ; $i++){
    ?>
    <tr>
    <td>
    <button class="tombol"><?php echo $i.". "; ?>KLIK SAYA !!</button>
    <div class="modal-kotak">
    <div class="close">
    <button class="tombol-tutup">X</button>
    </div>
    <div class="isi_modal">
    ISI <?php echo " ".$i; ?>
    </div>
    </div>
    </td>
    </tr>
    <?php
    }
    ?>
    </table>
    <script type="text/javascript">
    $(document).ready(function(){
    $('.tombol').click(function(){
    $('#bg').fadeIn("fast");
    $(this).next().fadeIn("fast");
    });
    $('.tombol-tutup').click(function(){
    $('#bg').fadeOut("fast");
    $(this).parent().parent().fadeOut("fast");
    });
    });
    </script>
    </body>
    </html>
  • Dear labalaba..

    Thanks pencerahanya suhu. Masih awam bgt sama javascript mesti banyak belajar lg :D
Sign In or Register to comment.