Hello there,I need a modal window which pop-up after a time delay.
Following are my requirements:
I’m pretty new to js and don’t know much about it,help will be highly appreciated 
Thanks
Welcome to the forums, @saurabhpathak.
I’ve moved your post into a new topic of its own as your requirements are quite specific.
How far have you got with coding this, and where are you stuck?
First of all thanks @TechnoBear for your prompt reply.
I have developed complete logic for it but in coding area I’m just able to delay the modal popup.
It’s not my area of expertise, but I’m sure if you post the code you have so far, and explain what help you need with it, somebody else will be able to assist.
When you post code on the forums, you need to format it so it will display correctly.
You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.
ok, so here is my code I have written so far
…
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Test</title>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
</head>
<body>
<h1></h1>
<h2></h2>
<p></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
function openColorBox(){
$.colorbox({iframe:true, width:"80%", height:"100%", href "http://www.wisehq.com/");
}
setTimeout(colorbox, 3000);
</script>
</body>
</html>
...
Hi @saurabhpathak, this code would throw a reference error – set the timeout to openColorBox, not colorbox. And keep an eye on the console. :-)
Hey @m3g4p0p you correctly pointed it out.And I changed it but my problem is to use cookies in this.
So do you have any idea of how to proceed?
You can generally access cookies with document.cookie. Is there a specific issue you are having?
@m3g4p0p I have to display modal as follow:
Check for cookies:
If cookies present:
display a modal which takes user to login page
else:
display a modal taking user to signup page.
Also I intend to show a modal when a user reaches the end of the web page.
Now I’m pretty new to JavaScript and web development,so I’m not getting how to move forward with the above requirements.
Okay then, one at a time. :-) What does cookie look like, and which is the value you’re interested in? If you’re not sure, just open the console and enter document.cookie.
hey! I’m looking for any cookie value which will help me to find out whether the user has visited for the first time on website or not.
document.cookie currently displays " ".
Then you might just check if the cookie has any value like
if (document.cookie) {
// display login modal
} else {
// display signup modal
}
Although it would make sense to check for a specific value in case you want to store other values in the cookie as well at some point. Suppose you’re setting the cookie in your backend with PHP like
setcookie('visited', 'true');
Then you could check if the cookie contains the string visited=true like
// The indexOf() method returns -1 if the needle is not
// found in the haystack, or the index otherwise
var visited = document.cookie.indexOf('visited=true') > -1
if (visited) {/* ... */}
More specific value checks are a bit more complicated; as explained in the MDN article above, the cookie is just a semicolon-separated string of key/value pairs, which has to be parsed first. There are quite a few small libraries out there to facilitate this though, for instance this one.
If you’re not setting the cookie on the backend but only from within the browser, you might also consider using the local storage instead, which is much easier to access:
if (localStorage.visited) {/* ... */}
localStorage.visited = 'true'
This will only run into the if branch the first time a user visits your site.
Ok so here I’m posting my recent code
…
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/jackmoore/colorbox/master/example1/colorbox.css" />
<link rel="stylesheet" href="\ouibounce.min.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script src="\ouibounce.js"></script>
<div id="ouibounce-modal">
<div class="underlay"></div>
<div class="modal">
<div class="modal-body">
<h2>ThankYou for coming!!</h2>
</div>
<div class="modal-footer">
</div>
</div>
</div>
<script>
function openColorBox(){
$.colorbox({iframe:true,width:"50%", height:"50%", href: "new_greeting_form.html"});
}
setTimeout(openColorBox, 5000);
parent.jQuery.colorbox.close();
// $(openColorBox).hide()
</script>
<script>
// if you want to use the 'fire' or 'disable' fn,
// you need to save OuiBounce to an object
var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
aggressive: true,
timer: 0,
callback: function() { }
});
$('body').on('click', function() {
$('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal-footer').on('click', function() {
$('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal').on('click', function(e) {
e.stopPropagation();
});
</script>
</body>
</html>
…
Hi i was wondering how to move the x button to the top of the popup is that possible?
Here’s the code i’m currently using:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
function openColorBox(){
$.colorbox({iframe:true, width:"80%", height:"90%", href: "subscribepopup.html"});
}
setTimeout(openColorBox, 5000);
</script>
This should work:
#colorbox #cboxClose {
top: 0;
right: 0;
}
#cboxLoadedContent{
margin-top:28px;
margin-bottom:0;
}
@James_Hibbard Thanks Pullo for your help that helped alot.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.