Pop-up delay to load when the user is on the site for 30 seconds

JavaScript
1

what needs to happen is:

  • delay the modal box for 30 seconds before showing it
  • hide the close button, and only show it when the user clicks give feed back
  • track the cookie so it doesn’t sow up until the next time the user uses the site
  • you only get to click close if the actual feedback is filled (optional)

here is the code:

<html>
	<head>
		<title>Test Page</title>
		<style>
			#content{
			width: 500px;
			position: float;
			top: 5%;
			margin: 0 auto;
			height: 100%;
			border: black 0px solid;
			padding: 5px;}
			
			#modal-box {
			font-family: "Arial", Georgia, sans-serif;
			position:fixed;
			top: 50%;
			left: 50%;
			width:600px;
			height: 355px;
			margin-top: -9em; 
			margin-left: -20em; 
			border: 1px solid #ccc;
			background-color: white;
			font-color
			z-index:9999;
			animation:opac 1.0s;
			
			#close {
			float:right;
			display:inline-block;
			padding:2px 2px;
			background:#ccc;}}

			#modal-content{width:100%; height:100%; overflow-y:scroll}
			#modal-footer{padding:5px;position:relative;bottom:0; left:0; width:100%;} 
		</style>
	</head>
	
<div id="modal-box">
<div id="modal-content">
<center><p><h1> We Welcome Your Feedback </h1>
<p>Help us improve your experience by taking our short survey.</center></p>

</div>
<div id="modal-footer">

<button id="close">Close</button>
<button id="no">No Thanks</button>
<button id="accept">Give Feedback</button>

</div>
</div>

<script type="text/javascript">
function showModalBox(){
showModalBox= document.getElementById('modal-box');
setTimeout(showModalBox,3000);
};
var button = document.getElementById('close');
button.onclick = function() {var div = document.getElementById('modal-box');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
}

var button = document.getElementById('no');
button.onclick = function() {var div = document.getElementById('modal-box');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
		clearTimeout(timeout);
    }
}


var survey = document.getElementById('accept');
survey.onclick = function() { var div = document.getElementById('modal-content');
div.innerHTML ="";
div.innerHTML ='<object style="width:100%; height:100%;" data="https://www.surveymonkey.com/r/WGT3VV5" />';
hideNoButton = document.getElementById("no"). style.visibility="hidden"; // hides the No Thanks button when the GiveFeedback button is pressed
hideAcceptButton = document.getElementById("accept").style.visibility="hidden";// hides the GiveFeedback button when the GiveFeedback button is pressed
div.style.overflow='hidden';
clearTimeout(timeout);
};
var timeout = setTimeout("location.reload(true);",30000);//1 second = 1000ms
  function resetTimeout() {
    clearTimeout(timeout);
    timeout = setTimeout("location.reload(false);");
	};

</script>
	</body>
</html>
2

Welcome to the forums, @notrl2016.

In order for us to be able to read your code easily and respond to your question, it helps if your code is formatted properly. If it isn’t, sometimes some of it will not display at all.

I have formatted your code for you this time, but in the future you can do one of the following:

  1. Highlight your code and then select the </> icon from the top of the edit window.
    OR
  2. Place three backticks (`) on the line just before your code, and three more backticks on the line after the code.
1 Like
3

thanks

4

Hi @notrl2016,

Set the #modal-box to display: none; in the CSS, then set a timeout to show it like

var modalBox = document.getElementById('modal-box')

window.setTimeout(function () {
  modalBox.style.display = 'block'
}, 30000)

Well if you want your visitors to leave instantly, that can reliably be achieved by setting #close to display: none; as well, and then adding an event listener to the #accept button which would show the close button like

var acceptButton = document.getElementById('accept')
var closeButton = document.getElementById('close')

acceptButton.addEventListener('click', function () {
  closeButton.style.display = 'block'
})

Since there is no backend interaction involved, I’d suggest to use the session storage instead, which will expire automatically when the user leaves the site. The timeout part might then become

var modalBox = document.getElementById('modal-box')
var isActiveSession = window.sessionStorage.isActiveSession

if (!isActiveSession) {
  window.sessionStorage.isActiveSession = 'true'
  
  window.setTimeout(function () {
    modalBox.style.display = 'block'
  }, 30000)
}

If you do need a cookie however, the approach would be analogous.

1 Like
5

thanks… i have worked on the click button last night but the delay is working now, thanks to you,
just a question this part of code will be installed/ embedded into a main site wich will be 400+ pages… for the cookie, will the code work for that scenario?

6

quick question… do you know how to make the close button active only when the person is half way through the survey?

7

I’ve been using the session storage instead of a cookie above, but yes that would work across all pages of your site. Check out the link for more information!

Do you mean half the input elements being filled or checked? I suppose you might do something like

<form id="my-form">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="submit" value="Submit" id="submit" disabled>
</form>

var form = document.getElementById('my-form')
var submit = document.getElementById('submit')

form.addEventListener('change', function () {
  // Get the elements of the form that have a value and are
  // not the submit button
  var filled = Array.from(form.elements).filter(function (el) {
  	return el.value !== '' && el.type !== 'submit'
  })
  
  // Set the disbaled-state of the button depending on whether
  // at least half of the elements are filled
  submit.disabled = filled.length < form.elements.length / 2
})

… but I’d think that could be a bit confusing for the user… better just make required fields required and mark them as such. You could then just use the required HTML attribute here.

8

yea i figured… ok what needs to be done now is make the modal show once every session… i dont know how to make it so it does it… like what needs to be done is even if the page is reloaded/ refreshed, the modal wont show if it was already appeared once

9

Does using the session storage as shown above not work? BTW, no need to start multiple threads with the same question(s). ;-)

10

it doesnt work. like when you refresh the page the modal still shows after 30 seconds

11

Works for me. Here’s a fiddle – try running multiple times, then close the tab and open it anew.

12

the delay works, but when you refresh the page, it shows it again… what i need is when it showed already, it will only come back when the user exits the tab and make a new session

13

Again, it works for me in the fiddle from my post #11. If this doesn’t work for you, you probably have cookies and web storage disabled in your browser. If my fiddle works but only on your page it does not, there’s probably another bug in your code; in this case, I can only help you if you provide a link to that page, or a fiddle that reproduces the problem (or at least the relevant code).

1 Like
14

i did checked the fiddle… it’s probably the cookies on my browser then, cos what im using is the exact same code on what I have posted. Thanks for your help… i will shoot a question if i dont fix it

15

here is a fiddle can you help me out

16

Ah yes, that helps. Well you need to check the console for errors – isActiveSession is not defined. ;-) You forgot this part:

var isActiveSession = window.sessionStorage.isActiveSession

Also, you’re setting the timeout outside of the if (isActiveSession) {} check, so of course it would have no effect. It works with my snippet from post #4:

var modalBox = document.getElementById('modal-box')
var isActiveSession = window.sessionStorage.isActiveSession

if (!isActiveSession) {
  window.sessionStorage.isActiveSession = 'true'
  
  window.setTimeout(function () {
    modalBox.style.display = 'block'
  }, 30000)
}

Here’s an updated fiddle.

17

Hey yess, it works now on the fiddle, but i’m using it on wordpress idk why its not working there… do you have any idea? … thanks for your help

18

No that should make no difference at all. Are there maybe any errors in the console? If not, I can only suggest you carefully review the code for logic errors, and debug it by setting breakpoints, logging to the console etc… like, does it run into the conditional? And if not, what is the value of isActiveSession at this point?

19

that I have to do now, though its the exact same one posted on the fiddle … thanks again

20

No problem! :-)