Hi
I am trying to create a pop up overlay box that has a form in it that needs to add signs up to a MailChimp account.
All the examples I have tried do not work and they don’t come with a cookie function to remember if somebody has signed up.
I would really really appreciate it if somebody could help me with this.
Many Thanks
Hi,
So do you have a form already?
Hi
I have the form styling but I need to get instructions from MailChimp in orer to integrate the form so it using the correct account and email sign ups get logged.
Put another way, I can help you make an overlay for the form and to remember signups.
Could you provide some markup?
<div class="signup-modal" id="signup-modal">
<div class="signup-modal__header">
<h2>Sign Up...</h2>
<a class="signup-modal__close fa fa-times"></a>
</div>
<div class="signup-modal__body">
<p>
Sign up to be the first to receive all the latest updates on releases,
shows, competitions, special offers and more.
</p>
<form class="form" action="http://www.shogunaudio.co.uk/modal-signup" method="post" id="signup-form2">
<input type="email" id="modal-formEmail" class="form__input nolabel" placeholder="Email" name="required[email]">
<button id="Go" class="submit form__input form__button">Subscribe</button>
<div class="form__result" id="signup-modal-ajax-return"></div>
</form>
</div>
<div class="signup-modal__footer">
<span>
Connect
</span>
<ul class="signup-modal__social">
<li><a href="https://www.facebook.com/shogunaudio" class="fa social__icon--facebook"></a></li>
<li><a href="https://twitter.com/shogunaudio" class="fa social__icon--twitter"></a></li>
<li><a href="http://www.youtube.com/user/ShogunAudio?sub_confirmation=1" class="fa social__icon--youtube"></a></li>
<li><a href="https://soundcloud.com/shogunaudio" class="fa social__icon--soundcloud"></a></li>
</ul>
<img class="signup-modal__footer__logo" src="./Shogun Audio_files/shogunaudio--logo.png" alt="">
</div>
</div>
But you seem to have a modal/overlay (I saw the site you sent me via PM).
What exactly is it that you need help with?
Edit: Very cool tunes, BTW!
On page load of the site I need a pop up overlay box that has form content in the pop up box (I also need the site in the background to be dimmed)
Please refesh the link I sent through PM
I really just need the overlay pop up code, javascript and cookie code, please take a look at this iste as an example www.shogunaudio.co.uk
Many Thanks
Hi
Please refresh again this is now correct, sorry about that
Now I don’t see any signup form (despite clearing my cookies).
Where’s it gone?
Yes that is correct, the last version did not work properly, with the new site you see now. I need to have the same functioanlity like this site www.shogunaudio.co.uk
Is that OK?
Thanks
Yes, that’s clear now : )
I’m busy right now, but I’ll get back to you later.
Great really appreciate it 
Hi
I was wondering if you have had a chance to look at this?
Many Thanks
Sure. Here’s how I would do it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Display a form in a lightbox</title>
<style>
#overlay{
display: block;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
#popup{
display: none;
position: absolute;
top: 25%;
width: 350px;
height: 200px;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<div id="popup">
<h2>Newsletter</h2>
<form>
<label for="email">Enter your email address:</label>
<input id="email" type="email" />
<p><input id="submit" type="submit" /></p>
</form>
</div>
<button>Clear Cookie</button>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}
$("form").on("submit", function(e){
e.preventDefault();
$("#popup, #overlay").hide();
$.cookie("popup", "displayed", { expires: 7 });
// Process subscription here
});
var hasSeenSignUpDialogie = $.cookie('popup');
if(!hasSeenSignUpDialogie){
$("<div>",{ id : "overlay" }).insertBefore("#popup");
$("#popup").show().center();
}
$("button").on("click", function(){
$.removeCookie('popup');
});
</script>
</body>
</html>
What this does is display the signup dialogue on the initial page load.
Once a user has entered an address, then a cookie is set so that the dialogue won’t show again.
If you want to clear the cookie that gets set, hit the “Clear Cookie” button and reload the page.
HTH
You can do that with css which will allow the page to be resized without fixing the popup in the wrong position.
For a fixed height and width fixed positioned element you just need to use the 4 co-ordinates and margin:auto to center vertically and horizontally in the viewport;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
e.g.
#popup{
display: none;
position: fixed;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
width: 350px;
height: 200px;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
Brilliant! Thanks Paul. Bookmarked.
Here’s the ammended code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Display a form in a lightbox</title>
<style>
#overlay{
display: block;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
#popup{
display: none;
position: fixed;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
width: 350px;
height: 200px;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<div id="popup">
<h2>Newsletter</h2>
<form>
<label for="email">Enter your email address:</label>
<input id="email" type="email" />
<p><input id="submit" type="submit" /></p>
</form>
</div>
<button>Clear Cookie</button>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$("form").on("submit", function(e){
e.preventDefault();
$("#popup, #overlay").hide();
$.cookie("popup", "displayed", { expires: 7 });
// Process subscription here
});
var hasSeenSignUpDialogie = $.cookie('popup');
if(!hasSeenSignUpDialogie){
$("<div>",{ id : "overlay" }).insertBefore("#popup");
$("#popup").show();
}
$("button").on("click", function(){
$.removeCookie('popup');
});
</script>
</body>
</html>
Great thanks Guys!
Will give it a go, much appreciated.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.