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.

Figure 1: List builder with hyperlink button added.
Go to List UI Page > Advanced > Custom Header
...
Code Block |
---|
|
<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> |

View file |
---|
name | APP_kb_dx8_iframePopupButton.jwa |
---|
height | 250 |
---|
|