Cara menggunakan membuat popup css

Question

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.

kode css