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
