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

-

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.

Comments

Post a Comment

Popular posts from this blog

Soal pilihan ganda dan essay pemrograman web dan perangkat bergerak

-
Pilihan Ganda  1.        Web server antar platform yang dapat berjalan di beberapa platform seperti LINUX dan windows adalah... a.         Web route b.        Apache c.         Xampp d.        Web server e.         DHCP server 2.        Server yang dapat membuat sistem berbasis unix (seperti linux) untuk melakukan sharing resource dengan sistem berbasi windows adalah... a.         Apache b.        Samba c.         Squid d.        Squired e.         Proxy 3.      ...
Read more

SOAL PEMROGRAMAN BERORIENTASI OBJEK (PBO) kelas 12

-
Image
Bidang study : Pemrograman Berbasis Object Kelas/ prog : XII RPL Hari/ tgl : Waktu : Petunjuk ! Baca basmalah dulu sebelum mengerjakan soal ujian ! Baca dengan teliti soal yang diberi kan Jawablah soal-soal dengan benar di lembar jawaban! Pilihan Ganda 1. Apa developer java sekarang ? Sun microsystem     c. Mysql AB Oracle                        d. Microsoft 2. Apa nama tipe data dalam java yang berupa array of char int       c. char String d. byte 3. Apa nama tipe data pada java yang hanya memiliki dua output char     c . boolean String  d. double 4. Mana di bawah ini yang bukan merupakan tipe data dalam java String  c. varchar...
Read more

Soal PBO Pilihan Ganda dan Essay SMT 19

-
Soal Pilihan Ganda dan Essay kls 12 PBO (Pemograman Berorientasi Objek) A. Pilihan Ganda 1. Kumpulan dari method-method yang belum terdapat operasi di dalam tubuh method tersebut disebut ... a. Abstract class b. Inheritance c. Interface d. Method abstract e. Implements 2. Nama lain dari istilah pewarisan adalah ... a. Inheritance b. Interface c. Overriding d. Overloading e. Implements 3. Class yang mempunyai sedikitnya satu abstract metode disebut ... a. Abstract class b. Class c. Multiple interface d. Implementasi e. Interface 4. Class yang digunakan menggunakan array dan character disebut ... a. Class math b. Class string c. Class string buffer d. Class wrapper e. Class procces 5. Method yang menghasilkan nilai mutlak adalah ... a. Publik static double max (double a, b) b. Publik static double cell (double a) c. Publik static double abs (double a) d. Publik static double floor (double a) e. Publik static dou...
Read more