Overlay with Text - After a certain time
-2
I want to remove the button instead. The code activates automatically After the visitors stop clicking the mouse on the page for 30 seconds
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.7);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}<div id="overlay" onclick="off()">
<div id="text">Where you gone?</div>
</div>
<button onclick="on()">I want to remove this button and make the icon activate automatically after a specified time</button>
</div>I want to remove the button instead. The code activates automatically After the visitors stop clicking the mouse on the page for 30 seconds
javascript html css
asked Jan 2 at 0:42
Piye YouiPiye Youi
117
add a comment |
-2
I want to remove the button instead. The code activates automatically After the visitors stop clicking the mouse on the page for 30 seconds
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.7);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}<div id="overlay" onclick="off()">
<div id="text">Where you gone?</div>
</div>
<button onclick="on()">I want to remove this button and make the icon activate automatically after a specified time</button>
</div>I want to remove the button instead. The code activates automatically After the visitors stop clicking the mouse on the page for 30 seconds
javascript html css
asked Jan 2 at 0:42
Piye YouiPiye Youi
117
add a comment |
-2
-2
-2
I want to remove the button instead. The code activates automatically After the visitors stop clicking the mouse on the page for 30 seconds
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.7);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}<div id="overlay" onclick="off()">
<div id="text">Where you gone?</div>
</div>
<button onclick="on()">I want to remove this button and make the icon activate automatically after a specified time</button>
</div>I want to remove the button instead. The code activates automatically After the visitors stop clicking the mouse on the page for 30 seconds
javascript html css
asked Jan 2 at 0:42
Piye YouiPiye Youi
117
I want to remove the button instead. The code activates automatically After the visitors stop clicking the mouse on the page for 30 seconds
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.7);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}<div id="overlay" onclick="off()">
<div id="text">Where you gone?</div>
</div>
<button onclick="on()">I want to remove this button and make the icon activate automatically after a specified time</button>
</div>I want to remove the button instead. The code activates automatically After the visitors stop clicking the mouse on the page for 30 seconds
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.7);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}<div id="overlay" onclick="off()">
<div id="text">Where you gone?</div>
</div>
<button onclick="on()">I want to remove this button and make the icon activate automatically after a specified time</button>
</div>function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.7);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}<div id="overlay" onclick="off()">
<div id="text">Where you gone?</div>
</div>
<button onclick="on()">I want to remove this button and make the icon activate automatically after a specified time</button>
</div>javascript html css
javascript html css
asked Jan 2 at 0:42
Piye YouiPiye Youi
117
asked Jan 2 at 0:42
Piye YouiPiye Youi
117
asked Jan 2 at 0:42
Piye YouiPiye Youi
117
asked Jan 2 at 0:42
Piye YouiPiye Youi
117
asked Jan 2 at 0:42
Piye YouiPiye Youi
117
117
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
Use setTimeout and clearTimeout
Example using 4000ms:
var EL_overlay = document.getElementById("overlay");
var timeoutOverlay = null;
function on() {
EL_overlay.style.display = "block";
}
function off() {
EL_overlay.style.display = "none";
clearTimeout(timeoutOverlay); // Clear existing timeout
timeoutOverlay = setTimeout(on, 4000); // and start a new one
}
// Keep clicking to reset ongoing timeout.
// If you stop clicking, a notification will appear after 4 sec
document.body.addEventListener('click', off);
off(); // Start the first timeout....html, body {height: 100%;}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.7);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}<div id="overlay">
<div id="text">Where you gone?</div>
</div>and don't forget to add html, body {height: 100%;}
answered Jan 2 at 0:56
Roko C. BuljanRoko C. Buljan
128k21196227
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54000084%2foverlay-with-text-after-a-certain-time%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Use setTimeout and clearTimeout
Example using 4000ms:
var EL_overlay = document.getElementById("overlay");
var timeoutOverlay = null;
function on() {
EL_overlay.style.display = "block";
}
function off() {
EL_overlay.style.display = "none";
clearTimeout(timeoutOverlay); // Clear existing timeout
timeoutOverlay = setTimeout(on, 4000); // and start a new one
}
// Keep clicking to reset ongoing timeout.
// If you stop clicking, a notification will appear after 4 sec
document.body.addEventListener('click', off);
off(); // Start the first timeout....html, body {height: 100%;}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.7);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}<div id="overlay">
<div id="text">Where you gone?</div>
</div>and don't forget to add html, body {height: 100%;}
answered Jan 2 at 0:56
Roko C. BuljanRoko C. Buljan
128k21196227
add a comment |
0
Use setTimeout and clearTimeout
Example using 4000ms:
var EL_overlay = document.getElementById("overlay");
var timeoutOverlay = null;
function on() {
EL_overlay.style.display = "block";
}
function off() {
EL_overlay.style.display = "none";
clearTimeout(timeoutOverlay); // Clear existing timeout
timeoutOverlay = setTimeout(on, 4000); // and start a new one
}
// Keep clicking to reset ongoing timeout.
// If you stop clicking, a notification will appear after 4 sec
document.body.addEventListener('click', off);
off(); // Start the first timeout....html, body {height: 100%;}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.7);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}<div id="overlay">
<div id="text">Where you gone?</div>
</div>and don't forget to add html, body {height: 100%;}
answered Jan 2 at 0:56
Roko C. BuljanRoko C. Buljan
128k21196227
add a comment |
0
0
0
Use setTimeout and clearTimeout
Example using 4000ms:
var EL_overlay = document.getElementById("overlay");
var timeoutOverlay = null;
function on() {
EL_overlay.style.display = "block";
}
function off() {
EL_overlay.style.display = "none";
clearTimeout(timeoutOverlay); // Clear existing timeout
timeoutOverlay = setTimeout(on, 4000); // and start a new one
}
// Keep clicking to reset ongoing timeout.
// If you stop clicking, a notification will appear after 4 sec
document.body.addEventListener('click', off);
off(); // Start the first timeout....html, body {height: 100%;}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.7);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}<div id="overlay">
<div id="text">Where you gone?</div>
</div>and don't forget to add html, body {height: 100%;}
answered Jan 2 at 0:56
Roko C. BuljanRoko C. Buljan
128k21196227
Use setTimeout and clearTimeout
Example using 4000ms:
var EL_overlay = document.getElementById("overlay");
var timeoutOverlay = null;
function on() {
EL_overlay.style.display = "block";
}
function off() {
EL_overlay.style.display = "none";
clearTimeout(timeoutOverlay); // Clear existing timeout
timeoutOverlay = setTimeout(on, 4000); // and start a new one
}
// Keep clicking to reset ongoing timeout.
// If you stop clicking, a notification will appear after 4 sec
document.body.addEventListener('click', off);
off(); // Start the first timeout....html, body {height: 100%;}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.7);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}<div id="overlay">
<div id="text">Where you gone?</div>
</div>and don't forget to add html, body {height: 100%;}
var EL_overlay = document.getElementById("overlay");
var timeoutOverlay = null;
function on() {
EL_overlay.style.display = "block";
}
function off() {
EL_overlay.style.display = "none";
clearTimeout(timeoutOverlay); // Clear existing timeout
timeoutOverlay = setTimeout(on, 4000); // and start a new one
}
// Keep clicking to reset ongoing timeout.
// If you stop clicking, a notification will appear after 4 sec
document.body.addEventListener('click', off);
off(); // Start the first timeout....html, body {height: 100%;}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.7);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}<div id="overlay">
<div id="text">Where you gone?</div>
</div>var EL_overlay = document.getElementById("overlay");
var timeoutOverlay = null;
function on() {
EL_overlay.style.display = "block";
}
function off() {
EL_overlay.style.display = "none";
clearTimeout(timeoutOverlay); // Clear existing timeout
timeoutOverlay = setTimeout(on, 4000); // and start a new one
}
// Keep clicking to reset ongoing timeout.
// If you stop clicking, a notification will appear after 4 sec
document.body.addEventListener('click', off);
off(); // Start the first timeout....html, body {height: 100%;}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.7);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}<div id="overlay">
<div id="text">Where you gone?</div>
</div>answered Jan 2 at 0:56
Roko C. BuljanRoko C. Buljan
128k21196227
edited Jan 2 at 1:03
answered Jan 2 at 0:56
Roko C. BuljanRoko C. Buljan
128k21196227
answered Jan 2 at 0:56
Roko C. BuljanRoko C. Buljan
128k21196227
answered Jan 2 at 0:56
Roko C. BuljanRoko C. Buljan
128k21196227
128k21196227
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54000084%2foverlay-with-text-after-a-certain-time%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
