Dialog atau modal pada Bootstrap

Pembahasan selanjutnya adalah modal atau dialog pada Bootstrap 4. Konsep pembuatan modal atau dialog pada Bootstrap 4 ini adalah

1. Button dengan
   data-toggle=”modal” data-target=”#dialogku”
   
2. Div dengan
   class=”modal” id=”dialogku” role=”dialog”
   
3. Div dengan
   class=”modal-dialog” role=”document”
   
4. Div dengan class modal-content
   
5. Jika menggunakan Javascript:
   $(“#dialogku”).modal(‘show’);

Petikan source code adalah seperti berikut ini:

<!– Button trigger modal –>
<button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”#dialogku”>
Promo
</button>

<!– Modal –>
<div class=”modal” id=”dialogku” role=”dialog”>
<div class=”modal-dialog” role=”document”>
<div class=”modal-content”>
<div class=”modal-header”>
<h5 class=”modal-title” >Promo</h5>
<button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”>
<span aria-hidden=”true”>&times;</span>
</button>
</div>
<div class=”modal-body”>
Dapatkan tambahan 10 email gratis selama masa promosi
</div>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>Tutup</button>
</div>
</div>
</div>
</div><!–./#dialogku–>

<button type=”button” id=”btnbuka” class=”btn btn-secondary”>
Buka dengan JS
</button>

document.querySelector(“#btnbuka”).addEventListener(“click”, function(){
$(“#dialogku”).modal(‘show’);
});

Demo dapat dilihat di https://bs4.aris.proweb.asia/mail00.html dengan tampilan seperti berikut ini:

Informasi lebih lanjut silahkan mengunjungi https://getbootstrap.com/docs/4.3/components/modal/ .

Kunjungi www.proweb.co.id untuk menambah wawasan anda.