An Ajax-powered quick-view modal

This "quick-view" style product-preview modal allows users to view more information about a product without leaving the page. And better still, without having to stuff a bunch of hidden content into the page. This

Click a product to launch the modal.

Implementation notes

Last updated: 2/07/2004

Step 1 - Creating the collection & building the UI

For this project, we'll create a collection with some basic information about shoes, then display the collection on a static page. We'll link to the collection item & later on add javascript to the page that will reference this link to pull the collection item content into a modal. We'll set the link preload property to "eager" in the settings panel so that the page will fetch the data prior to the link being clicked, reducing any lag when initiating the modal.

Step 2 - Building the modal

The custom modal will consist of 4 major parts: the Modal Wrapper div, which will be shown/hidden in the custom animations, the Modal Background div, which darkens the page & will trigger the closing of the modal on click, the Modal class itself, which styles the modal, & an empty div with the ID #ajax-container, which will house the content pulled in from the collection item page.

The Modal Wrapper needs to be set to position: fixed; & set to full screen & overflow: auto; so that the div will scroll if the content escapes the viewport. For this project we added a Modal Padding div to define the negative space around the modal. The Modal Background div is also set to position: fixed;& full screen. And the Modal class is set to position: relative; in order that it displays on top of the modal close trigger div.

Step 3 - Creating the modal animations

The animations are pretty straightforward... the Modal Wrapper div needs to be set to opacity: 0%; as an initial state, then animated to display: block; & opacity: 100%; on click. Then it just needs to be animated back to opacity: 0%; & display: none; on dismissal.

The trick to making the modal modular is to define the animations not on the element itself, but as individual classes that can be appended to any element to form a combo class. For this project, we're defining the launch animation on IX - Launch Modal & attaching it to the Product Link element & we're defining the dismissal animation on IX - Dismiss Modal & attaching it to the Modal Background element. These IX classes will need to be created as base classes so that the animations can be attached to them independently, rather than to the combo class. And the launch animations will need to affect all instances of Modal Wrapper while the dismissal animations will only need to affect parent instances.

Step 4 - Styling the collection page

The collection page layout will be very basic, with the content intended to be displayed inside the modal wrapped in a div with the ID #modal-content. Any images will need to be set to eager loading so that they're fetched on preload prior to the link being clicked.

Step 5 - Add the javascript

Paste the following Javascript at the end of the <body> of the static page. This will set the Body element to overflow: hidden; when the Product Link is clicked, fetch the content in the #modal-content div on the collection item page, load it into the #ajax-container div in the modal, & trap focus within the modal, & then set the Body element back to overflow: auto; & return focus to the Product Link when the modal is dismissed.

<script>

var lastFocusedElement;

$(document).on('click', '.product-link', function(event) {
    event.preventDefault();
    $('body').css('overflow', 'hidden');
    lastFocusedElement = this; // Store the clicked element
    var postURL = $(this).attr('href');
    loadDoc(postURL); // Load modal content
});

function loadDoc(postURL) {
    $("#ajax-container").load(postURL + " #modal-content", function() {
        $(".modal-wrapper").attr('tabindex', '-1').focus();
        setupFocusTrap('.modal-wrapper');
    });
}

function setupFocusTrap(modalSelector) {
    var $modal = $(modalSelector);
    var focusableElementsSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
    var $focusableElements = $modal.find(focusableElementsSelector);
    var $firstFocusableElement = $focusableElements.first();
    var $lastFocusableElement = $focusableElements.last();

    // Focus first element when modal is shown
    $firstFocusableElement.focus();

    // Trap focus within modal
    $modal.on('keydown', function(e) {
        if (e.key === 'Tab') {
            if (e.shiftKey) { // Shift + Tab
                if (document.activeElement === $firstFocusableElement[0]) {
                    $lastFocusableElement.focus();
                    e.preventDefault();
                }
            } else { // Tab
                if (document.activeElement === $lastFocusableElement[0]) {
                    $firstFocusableElement.focus();
                    e.preventDefault();
                }
            }
        }
    });
}

$('.ix---dismiss-modal').click(function() {
    $('body').css('overflow', 'auto');
    setTimeout(() => {
        $('#ajax-container').html('');
        if(lastFocusedElement) {
            $(lastFocusedElement).focus();
        }
    }, 200);
});

// Close on ESC button
$(document).keydown(function(e) {
    if (e.key === 'Escape') {
        $('.ix---dismiss-modal').click();
    }
});

</script>

Blockhead Projects

An Ajax-powered quick-view modal

Implementation notes

More projects

A dynamic, accessible video modal using in-page content

A responsive, CMS-driven, multi-pin Google Map

A Jetboost-powered instant search / sort / filter UI

A Webflow-native accordion component

An Ajax-powered quick-view modal

Multi-card layout becomes slider on mobile

Display dynamic content on static page