<!-- Button to trigger the modal -->
<button id="openModalBtn">READ NOW</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close" id="closeModalBtn">×</span>
<div id="side" class="side"></div>
<!-- Embedded URL using an iframe -->
<iframe id="embeddedFrame" src="" frameborder="0"></iframe>
</div>
<!-- The Overlay -->
<div id="overlay" class="overlay"></div>
<!-- END Overlay -->
<script>
// Get references to modal elements
var modal = document.getElementById("myModal");
var overlay = document.getElementById("overlay");
var side = document.getElementById("side");
var embeddedFrame = document.getElementById("embeddedFrame");
// Get references to open and close buttons
var openModalBtn = document.getElementById("openModalBtn");
var closeModalBtn = document.getElementById("closeModalBtn");
// Function to open the modal and load the URL
function openModalWithURL(url) {
embeddedFrame.src = url;
modal.style.display = "block";
overlay.style.display = "block";
}
// Function to close the modal
function closeModal() {
embeddedFrame.src = ""; // Clear the URL
modal.style.display = "none";
overlay.style.display = "none";
}
// Event listeners for open and close buttons
openModalBtn.addEventListener("click", function() {
openModalWithURL("<?php echo get_post_meta( get_the_ID(), 'iframe_url', true); ?>"); // Replace with your desired URL
});
closeModalBtn.addEventListener("click", closeModal);
// Close the modal when the overlay is clicked
overlay.addEventListener("click", closeModal);
side.addEventListener("click", closeModal);
</script>
<style>
/* Styling for the modal and overlay */
.modal {
display.: none;
position: fixed;
top.: 100%;
left.: 100%;
transform.: translate(-50%, -50%);
background-color: #fff;
padding.: 20px;
box-shadow.: 0 0 10px rgba(0, 0, 0, 0.5);
z-index: 1;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 97%;
height: 39px;
background-color: rgba(0 0 0 / 0%);
z-index: 1;
}
#side {
position: fixed;
top: 37px;
left: 0;
width: 14%;
height: 17%;
background-color: rgba(0 0 0 / 0%);
z-index: 1;
}
/* Style for the close button */
.close {
position: absolute;
top: -41px;
right: 11px;
cursor: pointer;
color: #ff1482;
font-size: 64px;
}
/* Style for the iframe */
iframe {
width: 100%;
height: 100vh; /* Adjust the height as needed */
}
</style>
0 Comments