Modal Toggle

Toggling the modal

The dashboard page has a table of products, each with an Edit and Delete button. The edit button will open a popup modal to overlay the rest of the content.

This modal has already been created using HTML, and we show/hide it with the CSS display property:

.modal {
    /* display: flex; */
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

In the script.js, add the following two functions to open/close the modal:

function openEditModal() {
    const modal = document.getElementById("edit-modal");
    modal.style.display = "flex";
}

function closeEditModal() {
    const modal = document.getElementById("edit-modal");
    modal.style.display = "none";
}

These functions select the modal wrapper and set the required display property. Next, locate the renderTableRows() function and a second parameter to the function inside of forEach called index:

function renderTableRows(container, products) {
  // select the index number
    products.forEach(function (product, index) {

This will store the index (position) number of the current array item, beginning at zero. In the same function locate the Edit button and add an onclick attribute:

<button class="edit-btn" onclick="openEditModal(${index})">Edit</button>

This will add a click event listener to the edit button, calling the openEditModal function. Pass the index position to the function as a parameter:

// add the `index`
function openEditModal(index) {
    const modal = document.getElementById("edit-modal");
    modal.style.display = "flex";
}

This will be used to know which product to edit in the array. To close the array we add an event listener to the modal close button, this is the cancel-edit button inside the modal:

<div class="modal-content">
  <label for="edit-name">Name:</label>
  <input id="edit-name" type="text" />
  <label for="edit-price">Price:</label>
  <input id="edit-price" type="number" step=".01" />
  <div class="modal-buttons">
    <button id="save-edit">Save</button>
    <!-- cancel button -->
    <button id="cancel-edit">Cancel</button>
  </div>
</div>

Back to the script.js, select this element and attach a click event listener to close the modal:

document.getElementById("cancel-edit")?.addEventListener("click", closeEditModal);

Notice the ? in the above line, this is JavaScript Optional chaining. This will prevent any errors if the event listener attempts to attache before the button is ready.

At the top of the script add a new variable to store the index number we are editing:

let currentEditIndex = null;

This is stored for the edit and delete functions to access.

Showing the current product info

The modal has an input for the product name and price. Update the openEditModal to set the selected products information:

function openEditModal(index) {
    const modal = document.getElementById("edit-modal");
  // select the input fields and store into a variable
    const nameInput = document.getElementById("edit-name");
    const priceInput = document.getElementById("edit-price");

    currentEditIndex = index;
    nameInput.value = filteredProducts[index].name;
    priceInput.value = filteredProducts[index].price;

    modal.style.display = "flex";
}

• currentEditIndex = index;: Update the current index to be available when editing and deleting products.
• nameInput.value = filteredProducts[index].name;: Set the name input field to be the array value from filteredProducts using the index position, selecting the name property. We also repeat for the price.