Cara Membuat Popup

Seringkali kita melihat sebuah popup box pada sebuah website, popup box dibuat dengan tujuan tertentu untuk pengguna agar bisa menerima pesan atau seuatu informasi yang diberikan. Nah, pada tutorial kali ini akan saya share bagaimana cara membuat popup. Pada kasus ini popup yang akan kita buat adalah popup dengan framework Bootstrap, dengan framework ini kita akan lebih mudah dalam membuat popup. Baiklah langsung saja ikuti langkah-langkahnya berikut ini.

Struktur Kode : Cara Membuat Popup

Sebelum memulai menuliskan kode pada Bootstrap, kalian wajib menyiapkan file Bootstrap yang bisa kalian download dihalaman resmi Bootstrap. Nah, Setelah itu barulah kita memulai untuk menuliskan kode Bootstrap seperti berikut ini.

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Klik Popup
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Judul Popup</h4>
      </div>
        <div class="modal-body">
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Tutup</button>
        <button type="button" class="btn btn-primary">Simpan</button>
      </div>
    </div>
  </div>
</div>

Pada bagin kode berikut ini, kalian bisa isikan beberapa paragraf.

<div class="modal-body">
    <p>Lorem ipsum dolor sit amet...</p>
</div>

Kode CSS : Cara Membuat Popup

Pada popup ini kita akan sedikit desain tampilan dengan menambahkan beberapa baris kode CSS berikut ini.

.modal-content {
    border-radius: 0px;
    box-shadow: none;
}
.modal-header {
    background: #f90;
    color: white;
}
.btn {
    border-radius: 0px;
}
.btn-lg {
    margin: 15px 0 0 15px;
}

Setelah baris kode diatas telah diketikan semua, selanjutnya simpan filenya dan silahkan buka pada browser masing-masing dan lihat hasilnya, maka tampilannya akan seperti pada gambar dibawah ini.

Cara Membuat PopupCara Membuat Popup

Bagaimana, cukup mudah bukan untuk membuat popup ? Baiklah, cukup sekian tutorial mengenai cara membuat popup, semoga bermanfaat dan selamat mencoba.

14 November 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat