I have created a page here:
http://www.metaltech.com.my/en-GB/exhibitors/Parking-Options.aspx
Ok, well where you have:
<div class="container-internal containers text">
<img alt="" src="/en-GB/parkingpopup.aspx" width="100%" />
</div>
Change that to:
<div class="container-internal containers text">
<a href="whatever"><img alt="" src="/en-GB/parkingpopup.aspx" width="100%" /></a>
</div>
Then in your JS code:
function openColorBox(){
$.colorbox({
iframe:true,
width:"90%",
height:"90%",
href: "http://www.metaltech.com.my/en-GB/exhibitors/Parking-Options.aspx",
...
});
}
Hi Pullo
Thank you very much for your help.
I am really grateful for this.
Thank you.
1 Like
Hi Pullo,
I am a website developer and got stuck in a problem. You guys are doing simply great job. You helped me a lot indirectly. Thank you so much.
2 Likes
Glad to hear it 
Hi,
How to open this popup immediately that is within 1 second?
Just remove the call to setTimeout
How to open this popup within 1 second.
code in given below.
<script>
function openColorBox() {
$.colorbox({
innerWidth:500,
innerHeight:200,
iframe:true,
href: "subscribe.html",
overlayClose:false,
onLoad: function() {
$('#cboxClose').remove();
}
});
}
if(!$.cookie("colorboxShown")){
openColorBox();
$.cookie('colorboxShown', true, { expires: 1, path: '/' });
}
</script>
Like so:
if(!$.cookie("colorboxShown")){
setTimeout(openColorBox, 1000);
$.cookie('colorboxShown', true, { expires: 1, path: '/' });
}
Hi Pullo,
Thanks a lot for your quick response. This code worked for me.
But I have one more issue that is when popup occur and if without filling that popup form I reload the page then for the next time popup doesn’t appear on the screen. How to resolve this issue? Please help me.
Either remove the cookie functionality entirely, or alter siad functionality so that the cookie is only set when a user has entered something into the form.
I recommend the second option.
Hi Pullo,
I appreciate your knowledge. Please do me one more favour by sharing the code for this option. I will be highly oblized.
Ok. Please post what you have already and say a little bit more about what you are trying to achieve.
Hi Pullo,
Hope you are having great time!
Here I have 4 files.
1st one is package.html in which i have call the popup from. The code is given below.
<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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
function openColorBox() {
$.colorbox({
innerWidth:200,
innerHeight:175,
iframe:true,
href: "subscribe.html",
overlayClose:false,
onLoad: function() {
$('#cboxClose').remove();
}
});
}
if(!$.cookie("colorboxShown")){
setTimeout(openColorBox, 0);
$.cookie('colorboxShown', true, { expires: 1, path: '/' });
}
</script>
2nd one is subscribe.html file in which i have shown the html form. The code is given below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Subscribe</title>
<link href="common/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColFixCtr">
<form action="thank-you.php" method="post" name="myForm" onsubmit="return(validate());">
<label for="Name">Name</label><br />
<input type="text" name="name" id="name" minlength="3" onblur="return(validate());" required/>
<br>
<label for="telNo">Mobile Number</label><br />
<input name="tel" type="tel" pattern="[789][0-9]{9}" id="tel" onblur="return(validate());" required/>
<br>
<label for="email">Email</label><br />
<input name="email" type="email" id="email" onblur="return(validate());" required/>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
3rd one is thankyou.php file in which i have put the php code for emailing the data after the successfull submission of the form. The code is given below.
<?php
$field_name = $_POST['name'];
$field_email = $_POST['email'];
$field_phone = $_POST['tel'];
$mail_to = 'abc@abc.com';
$subject = 'abc';
$body_message = 'From: '.$field_name."\n";
$body_message .= 'E-mail: '.$field_email."\n";
$body_message .= 'Phone: '.$field_phone;
$headers = 'From: '.$field_email."\r\n";
$headers .= 'Reply-To: '.$field_email."\r\n";
$mail_status = mail($mail_to, $subject, $body_message, $headers);
if ($mail_status) { ?>
<script language="javascript" type="text/javascript">
window.location = 'thank.php';
</script>
<?php
}
else { ?>
<script language="javascript" type="text/javascript">
alert('Message failed.');
window.location = 'subscribe.html';
</script>
<?php
}
?>
4th one is thank.php file in which i have shown the message for Thank you and popout the window. The code is given below.
<html>
<body>
<center><h1>Thank you!!</h1></center>
<script>setTimeout(function(){ window.parent.jQuery.colorbox.close(); }, 500);</script>
</body>
</html>
Now the problem is that whenever i visit first time on this package.html page, the popup appear on the screen which is correct as per my need. But if i refresh that page, the popup disappears which is not technically right. So i want that this popup appear again and again until user fill that form successfully and after the successful submission of the form popup do not show on this page for the next 24 hours.
Please help as soon as possible.
Thank you!
Hi there,
Thanks for the code. We can tighten things up a little by removing thank.php and submitting the form via Ajax.
For the purposes of this demo, I’ve moved the popup into the same file that you are calling it from. This gives us two files: index.html and submit.php.
The idea is that you display the popup on page load (nothing new here), then hook into the form’s submit event and stop the browser’s default action of actually submitting the form.
After that you can do some client-side validation. If everything checks out, you submit the form to the PHP scrip via Ajax. If there are errors, you alert the user to their presence and bail.
Inside the processForm function, you submit the form data to the server, then wait for a response. When the response comes in you check to see what it contains. If it contains “success” then you can go ahead and close the popup and set the cookie so that it won’t show for another 24 hrs.
If the response is not “success” then you can display some kind of error message to the user. This allows you to validate user input on both the client and the server.
Obviously this example is slightly simplified and you’ll have to adapt it to your use case. I can help you with that, but wanted to demonstrate the principle, as opposed to simply giving you teh codez.
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax form validation</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/jackmoore/colorbox/master/example1/colorbox.css">
<style>
#tmpl { text-align: center; }
</style>
</head>
<body>
<h1>My Awesome page!</h1>
<p>You'd better subscribe!</p>
<p>I needz ur emayl.</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 src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.min.js"></script>
<script>
const templateString = `
<div id="tmpl">
<h2>Please Subscribe!</h2>
<form id="myForm">
<label for="Name">Name: </label>
<input type="text" name="name" />
<input type="submit" value="Submit">
</form>
</div>
`;
function openColorBox() {
$.colorbox({
html: templateString,
width: 500,
height: 180,
onLoad() {
$('#cboxClose').remove();
},
});
}
function isValid(form) {
return form.name.value !== '';
}
function processForm(form) {
$.ajax({
url: './submit.php',
type: 'POST',
data: { name: form.name.value },
})
.done((res) => {
if (res === 'success') {
alert('Thanks!');
$.colorbox.close();
Cookies.set('colorboxShown', true, { expires: 1, path: '/' });
} else {
alert (res);
}
})
.fail(() => {
alert('Sorry, something went wrong');
});
}
if (!Cookies.get('colorboxShown')) {
openColorBox();
}
$('#myForm').on('submit', function handleSubmit(e) {
e.preventDefault();
if (isValid(this)) {
processForm(this);
} else {
alert('Please enter a name');
}
});
</script>
</body>
</html>
submit.php:
<?php
$name = $_POST['name'];
$retVal == "";
if (empty($_POST["name"])) {
$retVal = "Please enter a name!";
} else {
// Send your mail here
$retVal = "success";
}
echo $retVal;
?>
Hi Pullo I am a student learning to code and need some help with creating this modal.
.
I am using other JQuery features so I took this script out.
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
But I am not sure if it will affect anything. Please help me with it.
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.0.3/jquery.cycle.all.js"> </script>
<meta charset=utf-8 />
<link rel="stylesheet" href="https://cdn.rawgit.com/jackmoore/colorbox/master/example1/colorbox.css" />
<script src="https://cdn.rawgit.com/jackmoore/colorbox/master/jquery.colorbox-min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i|Martel:200,300,400,600,700,800,900" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/script.js"></script>
Below is the modal content.
<div id="modal-content">
<h4>WELCOME</h4>
<label for="email">Don't miss out on the latest updates!</label>
<input placeholder="enter your email here" id="email">
<button class="subscribe">SUBSCRIBE</button>
</div>
Below is the JS codes which I redirected to the renamed class
$(".subscribe").on("click", function() {
$.colorbox.close();
});
function onPopupOpen() {
$("#modal-content").show();
$("#email").focus();
}
function onPopupClose() {
$("#modal-content").hide();
Cookies.set('colorboxShown', 'yes', {
expires: 1
});
}
function displayPopup() {
$.colorbox({
inline: true,
href: "#modal-content",
className: "cta",
width: 600,
height: 350,
onComplete: onPopupOpen,
onClosed: onPopupClose
});
}
var lastFocus;
var popupShown = Cookies.get('colorboxShown');
if (popupShown) {
console.log("Cookie found. No action necessary");
$(".clear-cookie").show();
} else {
console.log("No cookie found. Opening popup in 3 seconds");
$(".clear-cookie").hide();
setTimeout(function() {
lastFocus = document.activeElement;
displayPopup();
}, 3000);
}
Appreciate it a lot if you can get back to me!
First of all, the obligatory “why?”. If I’m on your website and get an annoying popup which is after my email address, unless your site offers me something I cannot get elsewhere, I will click it away and leave your site.
That said, what happens when you run your modified code? Does it work? If not, do you get any error messages?
Hi Pulllo! Thanks for your help. Really appreciate it! It just does not pop up at all. I can see it is trying to run the
<script src="https://cdn.rawgit.com/jackmoore/colorbox/master/jquery.colorbox-min.js"></script>
but nothing pops up! Thank you! This is just part of my assignment so it is not a real website yet.
Ok, you got a link where I can see this not working?