How do I open a url into an overlay using vanilla javascript?

Question

I'm a little short staffed, and have been trying to solve an issue with a website.

I am refactoring a site that was previously using fancybox to open the Privacy Policy (privacy.php) or Terms and Conditions (terms.php) into what appeared to be a modal or overlay . Ideally, I'd like to trigger an onclick event (or similar) on an anchor tag, then display either the corresponding content from privacy.php or terms.php in the modal or overlay. I simply want it to display over the current page at about 80% width, so visitors can read the T&C or Privacy Policy without leaving the page or initiating a popup or window.open event.

My apologies for not including code -- I'm mainly just trying to find the right resources to get started.

Answer 1

You can create an absolutely-positioned iframe with a positive z-index (higher than any other z-index in your page), setting the source of the frame to your privacy.php page.

Rough code:

const iframe = document.createElement("iframe");
iframe.src = "privacy.php";
iframe.className = "privacy-overlay";
document.body.appendChild(iframe);

...with this CSS:

.privacy-overlay {
    position: absolute;
    left: 10%;
    top: 10%;
    width: 80%;
    height: 80%;
}

...or similar.

Or you might wrap it in a div with a button for removing it:

const div = document.createElement("div");
const closeButton = document.createElement("button");
closeButton.textContent = "Close";
div.appendChild(closeButton);
const iframe = document.createElement("iframe");
iframe.src = "privacy.php";
div.appendChild(iframe);
div.className = "privacy-overlay";
document.body.appendChild(div);
button.addEventListener("click", () => {
    document.body.removeChild(div);
});

...with appropriate CSS styling for arranging the elements within the div.