Creating Custom iFrame Popup On Button Position

Introduction

This article demonstrates a way to display an iFrame Popup at the position where the button is clicked. Hyperlink on list will be used as an example for this functionality.

How does it work?

The hyperlink action in the List Builder will be extracted as an element with a specific class and customized in a JavaScript implemented in the UI Builder for the Popup to appear.

1. In List Builder, add a hyperlink action to the List

2. In UI Builder, drag and drop a List Menu.

3. Go to List Menu > Advanced > Custom Header.

4. Add the following script. The following script adds an iframe popup to the hyperlink button's position:

 <style>
    /* Popup styling */
    #custom-popup {
        display: none;
        position: absolute;
        border: 2px solid #333;
        background-color: white;
        z-index: 999;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    /* Iframe styling */
    iframe {
        width: 400px;
        height: 300px;
        border: none;
    }
</style>

<!-- Hidden popup container -->
<div id="custom-popup">
    <iframe id="popup-iframe"></iframe> <!-- Empty src initially -->
</div>

<script>
$(document).ready(function() {
    $("#popup-iframe").attr("src", "");
    // Function to show the popup
    $('a.link_rowAction_0').on('click', function(event) {
        event.preventDefault();
        event.stopPropagation();
        // Get the popup iframe container and show it
        var popupIframeContainer = $('#custom-popup');
        popupIframeContainer.css('display', 'block');

        // Set the iframe src to load a webpage dynamically (replace with your desired URL)
        var iframe = $('#popup-iframe');
        iframe.attr('src', 'https://www.example.com');  // Set the webpage URL here

        // Get the button's offset and height
        var $button = $(this);
        var buttonOffset = $button.position();
        var buttonHeight = $button.outerHeight();
        // Calculate the position to show the popup right below the button
        var x = $button.offsetParent().outerWidth() - buttonOffset.left - $button.outerWidth(); // Horizontal position (left edge of the button)
        var y = buttonOffset.top + buttonHeight; // Vertical position (just below the button)

        // Position the popup iframe container below the button
        popupIframeContainer.css({
            'right': x + 'px',  // Align horizontally with the button
            'top': y + 'px',   // Appear just below the button
            'position': 'absolute'
        });
    });

    // Function to close the popup when clicking outside
    $(document).on('click', function(event) {
        var popupIframeContainer = $('#custom-popup');
        var target = $(event.target);

        // Check if the click is outside the popup and the button
        if (!target.closest('#custom-popup').length && !target.is('a.link_rowAction_0')) {
            popupIframeContainer.css('display', 'none');
            $('#popup-iframe').attr('src', '');  // Reset iframe source when closed
        }
    });
});

</script>

Results

Download sample app