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 05 April 2019 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

 Demover1code Download

Versi. 1 CODE

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>


Versi. 2 CODE

Berikut ini adalah cara lain.. anda tinggal CTRL+C , mengcopy.. lalu mempaste.. dan simpan dengan .html , jalankan dengan ke adaan koneksi internet aktif..

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>
<table id="dt_basic" class="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th data-hide="phone">No</th>
<th data-hide="phone,tablet">Nama Penandatangan</th>
<th data-class="phone">Nip Penandatangan</th>
<th data-hide="phone">Jabatan Penandatangan</th>
<th data-hide="phone,tablet" style="text-align: center">Aksi</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Andi</td>
<td>23232</td>
<td>kepala dinas</td>
<td style=\"text-align: center\">
<a title="Hapus" data-placement="right" class="btn btn-danger" data-toggle="modal" href="#myModal" onclick="set_url('http://suckittrees.com');">Hapus</a>
</td>
</tr>
</tbody>
</table>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="background: #021e4f">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Konfirmasi</h4>
</div>
<div class="modal-body">
<h2>Apakah anda yakin data ini akan <b>dihapus</b>?</h2>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Tidak</button>
<a class="btn btn-primary" id="btn-yes">Ya</a>
</div>
</div>
</div>
</div>
</div>
<script>
 function set_url(url) {
            $('#btn-yes').attr('href',url);
         }
</script>

 DemoVer2code Download

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