Create a Delete Modal using HTML and CSS

Last Updated : 13 Dec, 2023

This article will show you how to create a delete confirmation modal using HTML and CSS. The delete confirmation modal is used to display the popup confirmation modal before deleting the element.

Create a Delete Modal

Here, we use HTML to create the modal structure, and CSS add styles to the modal box. To hide the modal box, we use display: none; property.

Example:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <style> 
        body { 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            height: 100vh; 
        } 
  
        .modal-container { 
            display: none; 
            position: fixed; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            background: rgba(0, 0, 0, 0.5); 
            align-items: center; 
            justify-content: center; 
            z-index: 1; 
        } 
  
        .modal-content { 
            background-color: #fff; 
            border-radius: 8px; 
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
            max-width: 400px; 
            width: 100%; 
            padding: 20px; 
            text-align: center; 
        } 
  
        button { 
            border: none; 
        } 
  
        h2 { 
            color: #515151; 
        } 
  
        .confirmation-message { 
            margin-bottom: 20px; 
        } 
  
        .button-container { 
            display: flex; 
            justify-content: space-around; 
        } 
  
        .button { 
            padding: 10px 20px; 
            font-size: 16px; 
            text-align: center; 
            text-decoration: none; 
            border-radius: 5px; 
            cursor: pointer; 
        } 
  
        .cancel-button { 
            background-color: #ccc; 
            color: #535353; 
        } 
  
        .delete-button { 
            background-color: #e74c3c; 
            color: #fff; 
        } 
    </style> 
  
    <title>Delete Confirmation Modal</title> 
</head> 
  
<body> 
    <button id="showModalBtn" 
        class="button delete-button"> 
        Show Delete Confirmation 
    </button> 
  
    <div id="modal" class="modal-container"> 
        <div class="modal-content"> 
  
            <h2>Delete Confirmation</h2> 
            <p class="confirmation-message"> 
                Are you sure you want to delete this item? 
            </p> 
  
            <div class="button-container"> 
                <button id="cancelBtn" 
                    class="button cancel-button"> 
                    Cancel 
                </button> 
                <button id="deleteBtn" 
                    class="button delete-button"> 
                    Delete 
                </button> 
            </div> 
        </div> 
    </div> 
  
    <script> 
  
        // Get modal and buttons 
        const modal = document.getElementById('modal'); 
        const showModalBtn = document.getElementById('showModalBtn'); 
        const cancelBtn = document.getElementById('cancelBtn'); 
        const deleteBtn = document.getElementById('deleteBtn'); 
  
        // Show modal function 
        function showModal() { 
            modal.style.display = 'flex'; 
        } 
  
        // Hide modal function 
        function hideModal() { 
            modal.style.display = 'none'; 
        } 
  
        // Attach click event listeners 
        showModalBtn.addEventListener('click', showModal); 
        cancelBtn.addEventListener('click', hideModal); 
        deleteBtn.addEventListener('click', hideModal); 
    </script> 
</body> 
  
</html>