Cara Membuat Popup

14/11/2017    Risman Hakim    50     Website

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.

HTML CSS, Bootstrap, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More