After watching Whiz Fayisal's video, you followed his instructions for the tasks without making any changes on your own. If you have questions, feel free to ask in the YouTube comments. It's important to stick to Mr. Fayisal's instructions and make sure to do the tasks exactly as he explained.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup Iframe Example</title>
<style>
#popupIframe {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: none;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
background-color: #fff;
transition: transform 0.3s ease-in-out;
}
#popupIframe.active {
transform: translate(-50%, -50%) scale(1.05);
}
#iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<div id="popupIframe">
<iframe id="iframe" frameborder="0"></iframe>
</div>
<script>
var urls = [
' your link 1 ',
' your link 2 ',
];
var currentIndex = 0;
var displayTimer;
function startDisplay() {
var popupIframe = document.getElementById('popupIframe');
popupIframe.style.display = 'block';
popupIframe.classList.add('active');
loadNextUrl();
displayTimer = setInterval(function() {
loadNextUrl();
}, 30000);
}
function loadNextUrl() {
if (currentIndex < urls.length) {
var iframe = document.getElementById('iframe');
iframe.src = urls[currentIndex];
currentIndex++;
} else {
var popupIframe = document.getElementById('popupIframe');
popupIframe.classList.remove('active');
setTimeout(function() {
popupIframe.style.display = 'none';
clearInterval(displayTimer);
}, 300);
}
}
startDisplay();
</script>
</body>
</html>
Tnx
ReplyDelete