Di bawah ini kita akan mempelajari cara membuat modal konfirmasi delete dengan CSS. Modal ini biasanya digunakan ketika kita akah menghapus suatu data dalam website dan kita ingin mengkonfirmasi penghapusan tersebut menggunakan sebuah modal, yaitu modal konfirmasi delete. Klik pada tombol untuk membuka modal: <!DOCTYPE html>
<html>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
/* Atur gaya untuk semua button */
button {
background-color: #0000FF;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover {
opacity:1;
}
/* Float pada button batal dan hapus lalu tambahkan lebar yang sama */
.cancelbtn, .deletebtn {
float: left;
width: 50%;
}
/* Tambahkan warna pada button cancel*/
.cancelbtn {
background-color: #ccc;
color: black;
}
/* Tambahkan warna pada button delete */
.deletebtn {
background-color: #f44336;
}
/* Tambahkan padding dan teks rata tengah(center) ke container */
.container {
padding: 16px;
text-align: center;
}
/* The Modal (background) */
.modal {
display: none; /* Disembunyikan secara default */
position: fixed; /* Tetap di tempat */
z-index: 1; /* Tetap di atas */
left: 0;
top: 0;
width: 100%; /* Lebar maksimum */
height: 100%; /* tinggi maksimum */
overflow: auto; /* Tambahkan scrolling jika dibutuhkan */
background-color: #474e5d;
padding-top: 50px;
}
/* Konten modal box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% dari atas, 15% dari bawah dan tengah */
border: 1px solid #888;
width: 80%; /* Bisa lebih atau kurang, tergantung ukuran layar */
}
/* Beri style pada horizontal ruler */
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* Button Tutup Modal (x) */
.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #f1f1f1;
}
.close:hover,
.close:focus {
color: #f44336;
cursor: pointer;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* Ubah gaya untuk button batal dan button hapus pada layar ekstra kecil */
@media screen and (max-width: 300px) {
.cancelbtn, .deletebtn {
width: 100%;
}
}
</style>
<body>
<h2>Contoh Modal Konfirmasi Delete </h2>
<button onclick="document.getElementById('id01').style.display='block'">Open Modal</button>
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<form class="modal-content" action="/action_page.php">
<div class="container">
<h2>Hapus akun</h2>
<p>Apa kamu yakin ingin menghapus akun ini?</p>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="deletebtn">Delete</button>
</div>
</div>
</form>
</div>
<script>
// Dapatkan modal
var modal = document.getElementById('id01');
// Saat mengklik di mana saja di luar modal, maka tutuplah modal
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
Cara Membuat Modal Konfirmasi DeleteLangkah 1) Tambahkan HTML: <button onclick="document.getElementById('id01').style.display='block'">Open Modal</button>
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<form class="modal-content" action="/action_page.php">
<div class="container">
<h2>Hapus akun</h2>
<p>Apa kamu yakin ingin menghapus akun ini?</p>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="deletebtn">Delete</button>
</div>
</div>
</form>
</div>Langkah 2) Tambahkan CSS: * {box-sizing: border-box;}
/* Atur gaya untuk semua button */
button {
background-color: #0000FF;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover {
opacity:1;
}
/* Float pada button batal dan hapus lalu tambahkan lebar yang sama */
.cancelbtn, .deletebtn {
float: left;
width: 50%;
}
/* Tambahkan warna pada button cancel*/
.cancelbtn {
background-color: #ccc;
color: black;
}
/* Tambahkan warna pada button delete */
.deletebtn {
background-color: #f44336;
}
/* Tambahkan padding dan teks rata tengah(center) ke container */
.container {
padding: 16px;
text-align: center;
}
/* The Modal (background) */
.modal {
display: none; /* Disembunyikan secara default */
position: fixed; /* Tetap di tempat */
z-index: 1; /* Tetap di atas */
left: 0;
top: 0;
width: 100%; /* Lebar maksimum */
height: 100%; /* tinggi maksimum */
overflow: auto; /* Tambahkan scrolling jika dibutuhkan */
background-color: #474e5d;
padding-top: 50px;
}
/* Konten modal box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% dari atas, 15% dari bawah dan tengah */
border: 1px solid #888;
width: 80%; /* Bisa lebih atau kurang, tergantung ukuran layar */
}
/* Beri style pada horizontal ruler */
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* Button Tutup Modal (x) */
.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #f1f1f1;
}
.close:hover,
.close:focus {
color: #f44336;
cursor: pointer;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* Ubah gaya untuk button batal dan button hapus pada layar ekstra kecil */
@media screen and (max-width: 300px) {
.cancelbtn, .deletebtn {
width: 100%;
}
}Tip: Kita dapat menggunakan javascript berikut untuk menutup modal dengan mengklik di luar konten modal (dan tidak hanya dengan menggunakan tombol “x” atau “batal” untuk menutupnya): Contoh <script>
// Dapatkan modal
var modal = document.getElementById('id01');
// Saat mengklik di mana saja di luar modal, maka tutuplah modal
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script> |
Cara menggunakan remove button javascript
Pos Terkait
Copyright © 2024 toptenid.com Inc.
