Using modals/popups for confirmations

Modals (or popups) are an excellent way to request user confirmation before performing a critical action, such as deleting data, submitting a form, or confirming choices. In Power Pages, you can implement modals using HTML, JavaScript, and Liquid templates to create interactive user interfaces that enhance the user experience while ensuring that the user is making an intentional decision.

Here’s a step-by-step guide to implementing modals or popups for confirmation purposes in Power Pages:

1. Understand When to Use Modals

Modals should be used for actions that require user verification, preventing accidental actions. Common use cases include:

Confirming a form submission or delete operation.
Displaying important alerts or information.
Asking for user consent for actions that cannot be undone.

2. Basic Modal HTML Structure

A modal consists of a container that is initially hidden and is displayed only when needed. Here’s a basic modal structure in HTML:

<!-- Modal HTML -->
<div id="confirmationModal" class="modal">
    <div class="modal-content">
        <h4>Are you sure?</h4>
        <p>Do you want to proceed with this action?</p>
        <div class="modal-actions">
            <button id="confirmBtn" class="btn btn-primary">Confirm</button>
            <button id="cancelBtn" class="btn btn-secondary">Cancel</button>
        </div>
    </div>
</div>

<!-- Optional Background Overlay for the Modal -->
<div id="modalOverlay" class="overlay"></div>

This creates a modal with a confirmation question and two buttons (Confirm and Cancel). The modal is initially hidden by default.

3. CSS for Modal Styling

Now, you need to add some basic CSS to style the modal. The modal should be centered on the screen and overlay the content.

/* Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scrolling if needed */
    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
    padding-top: 60px;
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be adjusted for size */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.modal-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

.btn-primary {
    background-color: #4CAF50;
    color: white;
    border: none;
}

.btn-secondary {
    background-color: #f44336;
    color: white;
    border: none;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Overlay background */
    z-index: 999;
}

This CSS will style the modal and overlay. The modal is initially hidden (display: none;), and it will become visible when triggered.

4. JavaScript to Control Modal Behavior

You will need JavaScript to handle the logic for opening and closing the modal. This includes showing the modal when the user clicks a button and hiding it after they confirm or cancel the action.

// Get the modal and buttons
var modal = document.getElementById("confirmationModal");
var overlay = document.getElementById("modalOverlay");
var confirmBtn = document.getElementById("confirmBtn");
var cancelBtn = document.getElementById("cancelBtn");

// Function to open the modal
function openModal() {
    modal.style.display = "block";
    overlay.style.display = "block"; // Show overlay background
}

// Function to close the modal
function closeModal() {
    modal.style.display = "none";
    overlay.style.display = "none"; // Hide overlay background
}

// Function to handle confirm button
confirmBtn.onclick = function() {
    // Perform the action after confirmation, e.g., submitting the form
    alert("Action Confirmed!");
    closeModal(); // Close the modal
};

// Function to handle cancel button
cancelBtn.onclick = function() {
    closeModal(); // Just close the modal
};

// Optionally, close modal when clicking outside the modal area
overlay.onclick = function() {
    closeModal();
}

In the above JavaScript:

The openModal() function makes the modal visible.
The closeModal() function hides the modal.
The confirmBtn.onclick triggers an action (e.g., submitting a form or deleting data).
The cancelBtn.onclick simply closes the modal without taking any action.
The modal can also be closed by clicking on the overlay.

5. Triggering the Modal

You can trigger the modal when a user clicks on a specific button or performs an action that requires confirmation. For example, if you want to show a confirmation modal when the user tries to delete an item, you would use the following code:

<button onclick="openModal()">Delete Item</button>

When the “Delete Item” button is clicked, it will call the openModal() function, which displays the modal.

6. Dynamic Content in Modals

Sometimes, you may want to dynamically change the content of the modal based on the action. For example, the message inside the modal may change based on what the user is trying to do. This can be done by updating the modal’s inner HTML dynamically using JavaScript.

// Function to dynamically set modal content
function setModalContent(action) {
    var modalText = document.querySelector(".modal-content p");
    
    if (action === "delete") {
        modalText.innerHTML = "Are you sure you want to delete this item?";
    } else if (action === "submit") {
        modalText.innerHTML = "Are you sure you want to submit this form?";
    }
    
    openModal();
}

// Example usage:
setModalContent('delete'); // Open delete confirmation modal

7. Using Modals in Power Pages

In Power Pages, you can add these modal HTML, CSS, and JavaScript code blocks inside a Web Template or Page using the Liquid templates. You can pass specific content to the modal based on the context of the page or the action being taken.

For example, you can integrate the modal confirmation for form submissions or delete actions in your custom Power Pages forms using Liquid and JavaScript together.

8. Best Practices for Modal Use

Minimal Disruption: Keep the modal design non-intrusive, ensuring it does not disrupt the user experience. Avoid overusing modals for low-priority actions.
Clear Action Options: Ensure the action buttons are clearly labeled (e.g., “Confirm” and “Cancel”) to reduce user confusion.
Avoid Modal Overuse: Overusing modals for every minor action can lead to an overwhelming experience for the user. Use modals only for important actions that require confirmation.
Accessibility: Ensure your modal is accessible to all users, including those using screen readers. This includes providing focus management (focusing the modal on open and restoring focus on close) and ensuring that keyboard users can navigate through the modal.