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.

Implementation

Adding hyperlink button onto list

Figure 1: List builder with hyperlink button added.

Setting script on the page

Go to List UI Page > Advanced > Custom Header

Figure 2: UI Page Custom Header settings of the list.


The following script adds an iframe popup on the hyperlink buttons 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" src=""></iframe> <!-- Empty src initially -->
</div>

<script>
$(document).ready(function() {
    // 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

Sample App

APP_kb_dx8_iframePopupButton.jwa

  • No labels