Create a modal dialog/window in Public Forms

Forms Public Forms
1

Hi there, is it possible to launch a modal window with HTML content using the JavaScript framework on click of a button? Can you please provide some example code? Thanks in advance.

2

Dear @LarryL,
Sure, what kind of modal window? A basic one can be done with pure JS, something more fancy might require an external library to be loaded.

3

Thanks Nikita, I would be looking for a styled modal window (e.g. darker grey background, white foreground, maybe rounded corners) that could contain either styled HTML content (inline) or an embedded PDF document.

4

Dear @LarryL,

Here's a basic example. Paste this into the JavaScript editor:

fd.rendered(function() {
    // Build the modal once and keep it hidden
    var overlay = document.createElement('div');
    overlay.style.cssText = 'position:fixed; inset:0; background:rgba(40,40,40,0.75); display:none; align-items:center; justify-content:center; z-index:9999;';

    overlay.innerHTML =
        '<div style="background:#fff; border-radius:10px; padding:24px; width:90%; max-width:800px; max-height:90vh; overflow:auto; position:relative; box-shadow:0 10px 30px rgba(0,0,0,0.3);">' +
            '<button type="button" class="modal-close" style="position:absolute; top:8px; right:12px; border:none; background:none; font-size:26px; cursor:pointer;">&times;</button>' +

            // Inline HTML content
            '<h3>Hello!</h3>' +
            '<p>Any <b>styled HTML</b> content can go here.</p>' +

            // Embedded PDF (replace with your own URL, or remove)
            '<iframe src="https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf" style="width:100%; height:65vh; border:none;"></iframe>' +
        '</div>';

    document.body.appendChild(overlay);

    // Close on the X button or a click on the dark background
    overlay.addEventListener('click', function(e) {
        if (e.target === overlay || e.target.classList.contains('modal-close')) {
            overlay.style.display = 'none';
        }
    });

    // Global function so the button can call it
    window.openModal = function() {
        overlay.style.display = 'flex';
    };
});

Then add a Button to the form, and in its Click property, put:

openModal();

A few notes on the PDF part:

  • It won't display in the editor's preview mode, so test it on the published form link.
  • The file needs to be hosted somewhere that allows embedding, like a public website/CDN or a Google Drive "preview" link. SharePoint/OneDrive links usually won't display in an iframe.
  • Mobile browsers often won't render PDFs inline. If mobile users matter, a simple "Open PDF" link inside the modal that opens the file in a new tab is the most reliable fallback.

Give it a try and let me know how it works for you.

5

excellent - thanks very much Nikita! This approach works well :+1: