contact

Contact Person
Pin BB : 5AB31960
SMS : 082288467823
WA : 081275371724
call : 081275668074


Membuat Modal Alert Box untuk Konfirmasi Hapus Data

Posted in Tutorial Bootstrap Life at 23 September 2016 With 2 Comments

Perkembangan bootstrap memang sangat cepat, banyak fundation yang menggunakan aplikasi bootstrap, sekarang ini kita akan membahas Cara Membuat Konfirmasi Alert Box dengan Modal Bootstrap, Modal alert box disini bisa untuk digunakan untuk konfirmasi Delete / Hapus data di database lo, jika di kolaborasikan dengan PHP mysql, jadi sebelum kita menghapus data didatabase , kita akan mendapat konfirmasi Ya, No , Untuk menghapus Data, Tentu lebih userfriendly kan..?

Berikut ini merupakan Gambar Dari Konfirmasi dengan Modal Bootstrap sebelum hapus data :

membuat modal konfirmasi delete dengan bootstrap

 Demo Download



Bootstrap :

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Javascript Code

<script>
$(document).ready(function()
{
    $("button").click(function()
    {
        //Say - $('p').get(0).id - this delete item id
        $("#delete_item_id").val( $('p').get(0).id );
        $('#delete_confirmation_modal').modal('show');
    });
});
</script>

Modal HTML Code :

<p id="1">This is a item to delete.</p>

<button type="button" class="btn btn-danger">Delete</button>

<!-- Delete Modal content-->

<div class="modal fade" id="delete_confirmation_modal" role="dialog" style="display: none;">
    <div class="modal-dialog" style="margin-top: 260.5px;">
                <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">Do you really want to delete this Category?</h4>
            </div>
            <form role="form" method="post" action="category_delete" id="delete_data">
                <input type="hidden" id="delete_item_id" name="id" value="12">
                <div class="modal-footer">
                    <button type="submit" class="btn btn-danger">Yes</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">No</button>
                </div>
            </form>
        </div>

    </div>
</div>

Artikel Terkait

Diskusi

2 Komentar


Nur   Pada : 2016-09-25 08:56:00
Apaan kagak bisa register

Suckittrees Admin   Pada : 2016-09-28 08:14:19
User sudah aktif ,, silahkan Register, jika dalam waktu 1 x 24 jam tidak ada email notifikasi, admin akan aktifasi manual