modal

Jika ikon plus tersebut ingin membuka modal Bootstrap 5 saat diklik, ubah kode ikon menjadi:

<i class="bi bi-plus-lg me-3"

   data-bs-toggle="modal"

   data-bs-target="#modalTambahSiswa"

   style="cursor:pointer"></i>

Kemudian tambahkan kode modal berikut sebelum tag </body>:

<!-- Modal Tambah Siswa -->

<div class="modal fade"

     id="modalTambahSiswa"

     tabindex="-1"

     aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content border-0 rounded-4">

            <div class="modal-header">

                <h5 class="modal-title fw-bold">

                    Tambah Siswa

                </h5>

                <button type="button"

                        class="btn-close"

                        data-bs-dismiss="modal">

                </button>

            </div>

            <div class="modal-body">

                <div class="mb-3">

                    <label class="form-label">

                        Nama Siswa

                    </label>

                    <input type="text"

                           class="form-control"

                           placeholder="Masukkan nama siswa">

                </div>

                <div class="mb-3">

                    <label class="form-label">

                        Nomor WhatsApp

                    </label>

                    <input type="text"

                           class="form-control"

                           placeholder="08xxxxxxxxxx">

                </div>

                <div class="mb-3">

                    <label class="form-label">

                        Program/Kelas

                    </label>

                    <select class="form-select">

                        <option>English For Kids</option>

                        <option>English For Teens</option>

                        <option>Bimbel SD</option>

                        <option>Bimbel SMP</option>

                    </select>

                </div>

            </div>

            <div class="modal-footer">

                <button type="button"

                        class="btn btn-light"

                        data-bs-dismiss="modal">

                    Batal

                </button>

                <button type="submit"

                        class="btn btn-primary">

                    Simpan

                </button>

            </div>

        </div>

    </div>

</div>

Jangan lupa memastikan file Bootstrap JS sudah dimuat:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Jika aplikasi ini untuk manajemen bimbel, saya justru menyarankan modal yang lebih modern berisi menu pilihan seperti:

+ Tambah Siswa

+ Tambah Tagihan

+ Catat Pembayaran

+ Cetak Kartu SPP

sehingga satu tombol + dapat digunakan untuk berbagai aksi tanpa memenuhi tampilan halaman.