<p>
<a
href="#"
class="btn btn-danger"
data-bs-toggle="modal"
data-bs-target="#hapusModal"
data-bs-link="/berita/hapus/34"
data-bs-headline="Olimpiade Paris 2024 Dibuka"
>
Hapus Artikel 1
</a>
</p>
<p>
<a
href="#"
class="btn btn-danger"
data-bs-toggle="modal"
data-bs-target="#hapusModal"
data-bs-link="/berita/hapus/12"
data-bs-headline="Piala Eropa 2024 Ditutup"
>
Hapus Artikel 2
</a>
</p>
<!-- Modal Begins -->
<div class="modal fade" id="hapusModal"
tabindex="-1"
aria-labelledby="hapusModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Konfirmasi Penghapusan</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- Modal Ends -->
var hapusModal = document.getElementById('hapusModal')
hapusModal.addEventListener('show.bs.modal', function (event) {
// Tombol yang memicu modal
var button = event.relatedTarget
// Ambil info dari atribut-atribut data-bs-*
var link = button.getAttribute('data-bs-link')
var headline = button.getAttribute('data-bs-headline')
// Update isi modal.
var modalBody = hapusModal.querySelector('.modal-body')
var modalLink = hapusModal.querySelector('.modal-footer')
modalBody.textContent =
'Anda akan menghapus artikel berjudul `'
+ headline
+ '`. Apakah Anda yakin?'
modalLink.innerHTML =
'<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>'
+ '<a class="btn btn-danger" href="'
+ link
+ '">Hapus</a>';
})