Issue
I am trying to make my own subscription opt-in pop-up in HTML on my website. I want the pop-up to show only sometimes randomly. I don't want it to be visible all the time. I want it to be visible 1/3rd of the times. Please help me how to do it. I looked up on the web but it always misunderstood my question, so I am posting it here. Here is the code:
<div id="demo-float" class='demo-float'>
<span class='df-hide'>
<i class='fas fa-times'></i>
</span>
<div class='df-logo'></div>
<h3>Subscribe</h3>
<p class='excerpt'>Would you like to receive notifications on latest updates from Usual Queries?</p>
<a href='https://usualqueries.blogspot.com/p/subscribe.html' title='Sub'>Subscribe</a>
</div>
Here is the link to that pop-up (i.e. my website): https://usualqueries.blogspot.com/
Solution
You can achieve what you want by using the visibility property of your element and the setInterval() function, alongside Math.random(). You can use something like this:
let my_div = document.getElementById("my-div");
setInterval(() => {
if (Math.random()<=0.33) // Chance = 1/3
my_div.style.visibility === "hidden" ? my_div.style.visibility = "visible" : my_div.style.visibility = "hidden"; // If the element's visibility is set hidden, then set it back to visible and vice versa
}, 1e3); // Set the frequency of this interval to every 1 sec (1*10^3 ms)<html>
<head>
</head>
<body style="background-color:grey">
<div id="my-div" style="background-color:red">
<p>This is my div</p>
</div>
</body>
</html>Answered By - CcmU
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.