Easy way to show content in lightbox on CMS page?

Question

Just wondering if there is an easy way to display content in a lightbox on CMS pages using some inbuilt Magento 2 functionality rather than call an external JS script?

So for example:

<div class="popup-link">Click here</div>
    
    <div class="popup-content">
    Some content to go here...
    Some content to go here...
    Some content to go here...
    Some content to go here...
    Some content to go here...
    <div class="close-popup">Close</div>
    </div>

This is going to be on one page only so I didn't want to create a module for it if possible - just add the JS / code to the CMS page??

This is using Magento 2.3.5 and Porto theme (yes we are in the processes of upgrading - i know :) )

Answer 1

Yes, it's possible to display content in a lightbox on CMS pages in Magento 2 without calling an external JS script. Here's how you can achieve this:

1. Add the required HTML markup to your CMS page as follows:

    <div class="popup-link">Click here</div>
   
    <div class="popup-content" style="display:none;">
        Some content to go here...
        Some content to go here...
        Some content to go here...
        Some content to go here...
        Some content to go here...
        <div class="close-popup">Close</div>
    </div>
   

2. Add the following JavaScript code to the end of your CMS page content:

   <script type="text/javascript">
    require(['jquery', 'Magento_Ui/js/modal/modal'], function($, modal) {
        var options = {
            type: 'popup',
            responsive: true,
            innerScroll: true,
            title: '',
            buttons: []
        };
   
        var popup = modal(options, $('#popup-modal'));
        $(".popup-link").on('click',function(){
            $("#popup-modal").modal("openModal");
        });
    });
   

3. Save your CMS page.

This code uses Magento 2's built-in modal functionality to display the content in a lightbox when the user clicks on the "Click here" link. The "popup-link" class is used to target the link, and the "popup-content" class is used to target the content that will be displayed in the lightbox. The "close-popup" class is used to target the close button inside the lightbox. The JavaScript code initializes the modal with the required options and opens it when the user clicks on the link.

Note: Make sure that you have included the jQuery library on your CMS page before the JavaScript code, as it's required for the modal to work.

Answer 2

Magento doc say 'There is also a wide assortment of jQuery-based image lightboxes available on Magento Marketplace, and some are free.' [https://docs.magento.com/user-guide/v2.3/cms/lightboxes-and-sliders.html]

Extension you can use: https://marketplace.magento.com/swissup-lightboxpro.html

Happy Coding