Plugin Popup Alert Confirm dengan Javascript dan Bootstrap

Halo guys, kali ini saya mau membagikan gimana cara membuat sebuah plugin popup alert konfirmasi dengan javascript dan bootstrap yang tentunya bersifat fungsional sekali untuk mempermudah kita dalam membuild sebuah website dinamis.

Buat kalian yang sudah paham javascript pasti sudah paham mengenai fungsi alert() ataupun confirm() di javascript yang dimana di gunakan sebagai dialog UI yang akan berinteraksi dengan user. Sayangnya fungsi itu terlalu simple dan memiliki keterbatasan salah satunya kita tidak bisa menggunakan kode html untuk ditampilkan.

Namun sekarang sudah ada library bootstrap yang akan membantu kita dalam membuat alert atau yang di sebut modal. Di bootstrap ini pun jika digunakan secara langsung fungsinya hanya seperti alert tidak ada fungsi yang bisa di pakai untuk popup konfirmasi.

Nah untuk itu disini asaya akan memanfaatkan plugin modal bootstrap dan library jquery menjadi custom plugin multi fungsi atau dengan kata lain bisa menjadi semuah alert ataupun popup confirm.

1. Buat sebuah file js misal dengan nama file custom_alert.js

var MDLalert_calback_ok = ()=>{};
var MDLalert_calback_cancel = ()=>{};
$('body').append('<div id="MDLalert" class="modal fade MDLalert" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" style="z-index: 10000;">'+
    '<div class="modal-dialog modal-smX" style="max-width: 470px;">'+
        '<div class="modal-content">'+
            '<div class="modal-body">'+
                '<div class="text-center pb-2 pt-2 MDLalert_message"></div>'+
            '</div>'+
            '<div class="modal-footer font_product_bold">'+
                '<button type="button" class="btn btn-danger MDLalert_cancel" data-dismiss="modal">Close</button>  '+
                '<button type="button" class="btn btn-info MDLalert_ok" data-dismiss="modal" style="background-color: #01AFE4">Ok</button> '+
            '</div>'+
        '</div>'+
    '</div>'+
'</div> ');
function alertModal(options){
  var Modal = $('#MDLalert');
  var Html_msg = (typeof(options.message) != 'undefined')?options.message:'';
  var Btn_cancel = (typeof(options.btn_cancel) != 'undefined')?options.btn_cancel:'';
  var Btn_ok =  (typeof(options.btn_ok) != 'undefined')?options.btn_ok:'';
  var onCancel = (typeof(options.onCancel) != 'undefined')?options.onCancel:()=>{};
  var onOk =  (typeof(options.onOk) != 'undefined')?options.onOk:()=>{};
  if(Html_msg == ''){Html_msg = 'Alert';} 
  if($('.MDLalert').length == 0){return;}
  Modal.find('.MDLalert_message').html(Html_msg);
  Modal.find('.MDLalert_cancel').html(Btn_cancel).show();
  Modal.find('.MDLalert_ok').html(Btn_ok).show(); 
  if(Btn_cancel == ''){Modal.find('.MDLalert_cancel').hide()}
  if(Btn_ok == ''){Modal.find('.MDLalert_ok').hide()}
  Modal.modal('show');
  MDLalert_calback_cancel = onCancel;
  MDLalert_calback_ok = onOk;
}
$('.MDLalert').find('.MDLalert_cancel').click(function(){
  MDLalert_calback_cancel();
});
$('.MDLalert').find('.MDLalert_ok').click(function(){
  MDLalert_calback_ok();
});

2. Dalam konten html website tambahkan link jquery, bootstrap dan file js dari step 1, berikut contohnya

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="custom_alert.js"></script>

3. Untuk menggunakannya hanya perlu memanggil fungsi alertModal(config) seperti berikut

alertModal({
    message:'Ini adalah custom alert dengan <b>javascript</b> dan <b>bootstrap</b>',
    btn_cancel:'BATAL',
    btn_ok:'LANJUTKAN',
    onCancel:function(){
        // tambahkan aksi untuk button cancel 
    },
    onOk: function(){
        // tambahkan aksi untuk button ok
    }
});

Berikut penjelasan variablenya

• message isi dengan teks alert yang akan di tampilkan bisa berupa kode html.
• btn_cancel isi dengan string untuk nama tombol batal atau bisa juga di kosongkan untuk tidak di tampilkan.
• btn_ok isi dengan string untuk nama tombol ok atau bisa juga di kosongkan untuk tidak di tampilkan.
• onCancel merupakan variable fungsi yang akan di call setelah user mengklik tombol batal (dari variable btn_cancel). Abaikan jika tidak ada aksi.
• onOk berupa fungsi yang akan di call jika user mengklik tombol ok (dari variable btn_ok)

Sekian dulu apabila ada yang kurang jelas bisa lanjut di komentar.

Salam titik koma!!!