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.

No comments