Modal AJAX

Portfolio Modal Ajax

Modal ajax opens a portfolio item inside a lightbox popup, loading an HTML fragment on demand. Instead of expanding inline, the item detail appears in a centered overlay. It is driven by the lightbox with data-lightbox="ajax".

Structure

The grid uses the standard portfolio markup. The difference is the overlay trigger link, which points at an ajax HTML fragment and carries data-lightbox="ajax".

<div id="portfolio" class="portfolio row grid-container gutter-20" data-layout="fitRows">

    <article class="portfolio-item col-lg-3 col-md-4 col-sm-6 col-12 pf-media pf-icons">
        <div class="grid-inner">
            <div class="portfolio-image">
                <a href="portfolio-single.html">
                    <img src="images/portfolio/4/1.jpg" alt="Open Imagination">
                </a>
                <div class="bg-overlay">
                    <div class="bg-overlay-content dark" data-hover-animate="fadeIn">
                        <a href="images/portfolio/full/1.jpg" class="overlay-trigger-icon bg-light text-dark" data-lightbox="image" title="Image"><i class="uil uil-plus"></i></a>
                        <a href="include/ajax/portfolio-single-image.html" class="overlay-trigger-icon bg-light text-dark" data-lightbox="ajax"><i class="bi-eye"></i></a>
                    </div>
                    <div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
                </div>
            </div>
            <div class="portfolio-desc">
                <h3><a href="portfolio-single.html">Open Imagination</a></h3>
                <span><a href="#">Media</a>, <a href="#">Icons</a></span>
            </div>
        </div>
    </article>

</div>

The ajax trigger

The key element is the overlay link that fetches a fragment into the lightbox:

<a href="include/ajax/portfolio-single-image.html" class="overlay-trigger-icon bg-light text-dark" data-lightbox="ajax">
    <i class="bi-eye"></i>
</a>

• href points at the HTML fragment to load (the item detail markup).
• data-lightbox="ajax" tells the lightbox to fetch the URL and display the result in a modal overlay.

How it works

• Clicking the data-lightbox="ajax" link opens the lightbox and loads the href fragment inside it.
• Compared to in page ajax, the content appears in a centered popup instead of expanding below the grid, so there is no #portfolio-ajax-wrap needed on the page.
• The same grid can mix trigger types: an image lightbox (data-lightbox="image") for the full photo and an ajax lightbox (data-lightbox="ajax") for the detail view.

Options

• data-lightbox="ajax": loads the linked HTML fragment into a lightbox modal.
• data-lightbox="image": opens a full image in the lightbox instead of an ajax fragment.
• .overlay-trigger-icon: styles the hover overlay action button.
• .portfolio-image / .bg-overlay: the thumbnail and its hover overlay that hold the trigger links.

Tips

• Point the ajax trigger href at a lightweight HTML fragment, not a full page, so only the detail markup loads into the modal.
• You can offer two actions per item: a photo lightbox and an ajax detail lightbox, by using two overlay links with different data-lightbox values.
• Because the content lives in the lightbox, this pattern needs no extra ajax container on the page, unlike in page ajax.
• Keep the fragment self contained; the lightbox displays exactly what the URL returns.