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.
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.