Cara Bikin Pop-Up Keren dan Responsive Kurang dari 5 Menit Hanya dengan Bootstrap

Share:

Assalamualaikum warahmatullahi wabarakaatuh, Alhamdulillah segala puji bagi Allah ta'ala yang telah memberikan nikmat dan rahmatnya sehingga admin dapat kembali hadir memberikan tutorial-tutorial yang InsyaAllah bermanfaat bagi kita semua.

Kali ini admin ingin berbagi tutorial cara membuat kotak pop-up dengan bootstrap, bagi para newbie khususnya kalian tidak perlu punya kemampuan yang mendalam tentang javascript dan css untuk membuat kotak pop-up. Kotak Pop-up ini nantinya dapat kita gunakan untuk membuat box informasi, form, atau dimodifikasi sesuai dengan keinginan kalian.



Membuat Kotak Pop-up dengan Bootstrap

Kotak Pop-up di dalam bootstrap disebut dengan modal, anda dapat menggunakan plugin javascript bootstrap untuk membuat box dialog, pesan, atau form inputan.

  • Buka editor kalian, lalu copy paste script di bawah ini. dan save dengan nama latihan.html

<!DOCTYPE <!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    </head>
    <body>
    
    </body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</html>

  • Copy paste script di bawah ini dan letakkan di bawah <body>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
 Launch demo modal
</button>
          
        <!-- Modal -->
        <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
            </div>
        </div>
        </div>
  • save dokumen yang kalian buat
  • lalu buka dokumen dengan browser
Hasilnya akan tampak seperti gambar di bawah ini




Penjelasan dari script di atas 

Di bawah ini hanya penjelasan singkat dari script-script di atas, jadi jangan bingun dengan script di bawah ini :

Di bawah ini adalah script button, jika diklik akan memunculkan modal pop-up. Anda dapat merubah tulisan Launch demo modal dengan tulisan kalian sendiri


<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
 Launch demo modal
</button>


Di bawah ini adalah script modalnya, kalian dapat mengganti "..." sesuai dengan kebutuhan kalian. Kalian dapat memberikan informasi, box dialog, atau bisa juga membuat form dengan modal

<!-- Modal -->
        <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
            </div>
        </div>
        </div>


Bagaimana, cukup mudah bukan membuat pop-up dengan modal bootstrap. Dengan menggunakna framework ini anda tidak perlu punya skill yang mendalam tentang javascript dan css. Tampilannya keren dan responsive untuk semua perangkat. Jika anda benar-benar paham dengan tutorial kali ini pembuatan pop-up ini tidak perlu memakan waktu lebih dari 5 menit. Ok, demikian tutorial dari saya mudah-mudahan bermanfaat bagi kita semua.

17 comments:

  1. Replies
    1. seharusnya responsive, coba aja buat pure bootstrap tanpa tambahan css

      Delete
  2. Replies
    1. small = btn-sm
      large = btn-lg
      extra small = btn-xs

      kalo mau full panjang pake btn-block

      Delete
  3. Bro Req Pop Up Komentar Yang Kaya Tombol Back To Top Button Bang Jadi posisi Tombol Komen itu ada Di Bawah pojok kiri kaya tombol scroll to top button

    ReplyDelete
    Replies
    1. bolehlah, nanti saya pikirkan. thnks kunjungannya mas

      Delete
  4. bos kalau mau bikin form pengisian data pribadi menggunakan popup gimana ya?

    ReplyDelete
  5. silahkan baca artikel yang ini mas https://www.sahretech.com/2019/12/study-case-membuat-aplikasi-crud.html

    disitu ada cara membuat modal/popup form tambah dan edit

    ReplyDelete
  6. Bang , Kalo mau buat Bio Pop up gimana ya bang? , lgi butuhh buat tugas

    ReplyDelete
    Replies
    1. kamu bisa pake tabel atau form, klo tabel buat dua kolom, kolom keterangan sama isian. Pake form juga bisa, tinggal didisabled aja formnya biar datanya gak bisa diganti. Klo kamu mau refrensi tampilan biodata bisa searching di google dengan kata kunci "profile bootstrap style" atau yang semacamnya. Contohnya banyak di internet bisa langsung copas

      Delete
  7. Bang saya udh ada web demo, jd jika di klik muncul pop up tersebut. bagaimana cara menghubunginnya? TOlong di balas bang terimakasih

    ReplyDelete
    Replies
    1. pasang script ini mas

      <script type="text/javascript">
      $(window).on('load', function() {
      $('#exampleModalLong').modal('show');
      });
      </script>

      Delete
  8. Cara biar ketika web dibuka lalu popup muncul otomatis (tanpa harus klik tombol Launch demo modal) gimana ya bang?

    ReplyDelete
    Replies
    1. <script type="text/javascript">
      $(window).on('load', function() {
      $('#exampleModalLong').modal('show');
      });
      </script>

      Delete
  9. Cara menampilkan gambar di poupnya gimana itu bang

    ReplyDelete
  10. Replies
    1. Alhamdulillah, terima kasih atas kunjungannya :)

      Delete

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik

Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi