contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Membuat Modal Alert Box untuk Konfirmasi Hapus Data

Posted in Tutorial Bootstrap Life at 20 Juli 2018 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>

CSS:

<style>
.trash{padding:2px; border:1px solid red; margin-left:10px; background-color:red; color:#fff}
td{padding:5px}
</style>

Javascript Code

<script>
$('.trash').click(function(){
    var id=$(this).data('id');
    $('#modalDelete').attr('href','delete-cover.php?id='+id);
})
</script>

Modal HTML Code :

<div class="modal small fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                 <h3 id="myModalLabel">Delete Confirmation</h3>

            </div>
            <div class="modal-body">
                <p class="error-text"><i class="fa fa-warning modal-icon"></i>Are you sure you want to delete the cover?
                    <br>This cannot be undone.</p>
            </div>
            <div class="modal-footer">
               <button class="btn btn-default"data-dismiss="modal" aria-hidden="true">Cancel</button> <a href="#" class="btn btn-danger"  id="modalDelete" >Delete</a>

            </div>
        </div>
    </div>
</div>

<table>
    <thead>
        <th>Cover Name</th>
        <th>Sum Insured</th>
        <th>Info</th>
        <th style="width: 3.5em;"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>name 1</td>
            <td>insured 1</td>
            <td>info 1</td>
            <td> <a href="cover-type.php?id=1"><i class="fa fa-pencil"></i></a>
 <a href="#myModal" class="trash" data-id="1" role="button" data-toggle="modal"><i class="fa fa-trash-o">x</i></a>

            </td>
        </tr>
        <td>name 2</td>
        <td>insured 2</td>
        <td>info 2</td>
        <td> <a href="cover-type.php?id=2"><i class="fa fa-pencil"></i></a>
 <a href="#myModal" class="trash" data-id="2" role="button" data-toggle="modal"><i class="fa fa-trash-o">x</i></a>

        </td>
        </tr>
        <td>name 3</td>
        <td>insured 3</td>
        <td>info 3</td>
        <td> <a href="cover-type.php?id=3"><i class="fa fa-pencil"></i></a>
 <a href="#myModal" class="trash" data-id="3" role="button" data-toggle="modal"><i class="fa fa-trash-o">x</i></a>

        </td>
        </tr>
    </tbody>
</table>

<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 Rekomendasi



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