204 lines
6.2 KiB
PHP
204 lines
6.2 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Delete Confirmation Popup</title>
|
|
<style>
|
|
/* Base Styles */
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Overlay Styles */
|
|
.delete-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.3s, visibility 0.3s;
|
|
}
|
|
|
|
.delete-overlay.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
/* Popup Container */
|
|
.delete-popup {
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
width: 400px;
|
|
padding: 24px;
|
|
text-align: center;
|
|
transform: translateY(-20px);
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.delete-overlay.active .delete-popup {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Warning Icon */
|
|
.warning-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
margin: 0 auto 16px;
|
|
border-radius: 50%;
|
|
background-color: #FFF4F4;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.warning-icon span {
|
|
color: #E53935;
|
|
font-size: 36px;
|
|
}
|
|
|
|
/* Popup Content */
|
|
.popup-title {
|
|
font-weight: 600;
|
|
font-size: 22px;
|
|
color: #333;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.popup-message {
|
|
color: #666;
|
|
margin-bottom: 24px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* Button Container */
|
|
.popup-buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
/* Button Styles */
|
|
.popup-btn {
|
|
padding: 10px 24px;
|
|
border-radius: 6px;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
border: none;
|
|
}
|
|
|
|
.cancel-btn {
|
|
background-color: #F0F0F0;
|
|
color: #666;
|
|
}
|
|
|
|
.cancel-btn:hover {
|
|
background-color: #E0E0E0;
|
|
}
|
|
|
|
.delete-confirm-btn {
|
|
background-color: #E53935;
|
|
color: white;
|
|
}
|
|
|
|
.delete-confirm-btn:hover {
|
|
background-color: #C62828;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Delete Confirmation Modal Template -->
|
|
<div id="deleteConfirmationModal" class="delete-overlay">
|
|
<div class="delete-popup">
|
|
<div class="warning-icon">
|
|
<span class="material-symbols-outlined">warning</span>
|
|
</div>
|
|
<h3 class="popup-title">Konfirmasi Hapus</h3>
|
|
<p class="popup-message">Apakah Anda yakin ingin menghapus berita "<span id="newsTitle"></span>"? Tindakan ini tidak dapat dibatalkan.</p>
|
|
<div class="popup-buttons">
|
|
<button id="cancelDelete" class="popup-btn cancel-btn">Batal</button>
|
|
<button id="confirmDelete" class="popup-btn delete-confirm-btn">Ya, Hapus</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Store original forms
|
|
const deleteForms = {};
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Get all delete buttons
|
|
const deleteButtons = document.querySelectorAll('.delete-btn');
|
|
const modal = document.getElementById('deleteConfirmationModal');
|
|
const cancelBtn = document.getElementById('cancelDelete');
|
|
const confirmBtn = document.getElementById('confirmDelete');
|
|
const newsTitleSpan = document.getElementById('newsTitle');
|
|
|
|
let currentForm = null;
|
|
let currentNewsId = null;
|
|
let currentNewsTitle = null;
|
|
|
|
// Add click event to all delete buttons
|
|
deleteButtons.forEach(btn => {
|
|
const form = btn.closest('form');
|
|
const newsRow = btn.closest('tr');
|
|
const newsId = form.action.split('/').pop();
|
|
const newsTitle = newsRow.querySelector('td:first-child').textContent;
|
|
|
|
// Store original form submission
|
|
deleteForms[newsId] = {
|
|
form: form,
|
|
title: newsTitle
|
|
};
|
|
|
|
// Override form submission
|
|
form.onsubmit = function(e) {
|
|
e.preventDefault();
|
|
currentForm = form;
|
|
currentNewsId = newsId;
|
|
currentNewsTitle = newsTitle;
|
|
|
|
// Show modal with news title
|
|
newsTitleSpan.textContent = currentNewsTitle;
|
|
modal.classList.add('active');
|
|
return false;
|
|
};
|
|
});
|
|
|
|
// Cancel button closes the modal
|
|
cancelBtn.addEventListener('click', function() {
|
|
modal.classList.remove('active');
|
|
currentForm = null;
|
|
});
|
|
|
|
// Confirm button submits the original form
|
|
confirmBtn.addEventListener('click', function() {
|
|
if (currentForm) {
|
|
modal.classList.remove('active');
|
|
currentForm.submit();
|
|
}
|
|
});
|
|
|
|
// Clicking outside the popup closes it
|
|
modal.addEventListener('click', function(e) {
|
|
if (e.target === modal) {
|
|
modal.classList.remove('active');
|
|
currentForm = null;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |