Jump to content
GreenSock

kk12837

home page popup

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,
 
Is not too hard, you need to create the overlay (semi-transparent element over everything in the page), then the message element and finally the code so the message is always at the center of the page.
 
First you have to write the css:

html, body{
	height:100%;
	margin:0;
}
#overlay{
	height:100%;
	width:100%;
	background:#000;
	z-index:5000;
	position:fixed;
	top:0;
	left:0;
}
#messageBody{
	background-color: #D9D9FF;
	width:800px;
	min-height:400px;
	border-radius:10px;
	box-shadow:0 5px 5px #000;
	position:fixed;
	z-index:5500;
	overflow:hidden;
}

Very important that the position of both elements is set to fixed, otherwise the user can scroll and they'll be out of the screen. Another thing to note is that I'm not sure how necessary is the html, body rule now a days, I'll keep using it but maybe someone with more updated knowledge in this regard could clarify that.
 
Then you have to position the message body, a usual technique is to set the margin property to auto, but I prefer javascript because of cross browsing:

var windowWidth = $(window).width(),
    windowHeight = $(window).height(),
    messageBody = $("div#messageBody"),
    overlay = $("div#overlay"),
    msgBdHeight = messageBody.outerHeight(),
    msgBdWidth = messageBody.outerWidth(),
    posTop = (windowHeight / 2) - (msgBdHeight / 2),
    posLeft = (windowWidth / 2) - (msgBdWidth / 2);

//Set the elements initial state
TweenMax.set(overlay, {autoAlpha:0, top:posTop, left:posLeft});
TweenMax.set(messageBody, {vars});//Here the rest is up to you, if you want
//to set a scale up tween you should use a small scale , also could be a 
//fly by, etc., the sky is the limit.

And finally you set up a timeline for showing the pop up, first you show the overlay and then the rest of the message, something like this:

var tl1 = new TimelineMax({paused:true}),
      tl2 = new TimelineMax({paused:true});

tl1
    .to(overlay, .25, {autoAlpha:.35})//here you can set how fast and how
//transparent you want the overlay
    .to(messageBody, .5, {vars});//this will depend of the options you used
//in the set tween for the body, and how you want your message to appear.

Roughly that's how you could set up a popup message, the animations are up to you, because you have quite a handle of them to play around.

 

One last advice will be that if your intention is to put a pop up in your home page, maybe you should consider a tracking cookie, so your visitors will see the pop up just once a day, or once every number of hours, because it could become somehow annoying to keep seeing the pop up every time you go to the home page or you load the page, unless the pop up will show on a user event like a mouse click, in that case don't pay attention to everything I wrote above.

 

Hope this helps,

Cheers,

Rodrigo.

  • Like 3
Link to comment
Share on other sites

Hi again,

 

I set up a simple example so you can see it in action, the only problem is that I couldn't set up syntax highlighter properly and it look a little sterile in general, but is getting quite late around here so you'll have to look at the code with firebug or developer tools, but tomorrow I'll correct that situation.

 

http://codeaway.info/sample.code/popup/

 

EDIT:

I uploaded the syntax highlighter , so you can see the code of the sample.

 

Cheers,

Rodrigo.

Link to comment
Share on other sites

  • 10 months later...

Hi Calvin and welcome to the Greensock forums.

 

Actually I'm able to see the popup in every major browser I have installed.

 

Notice that this is not an automatic popup, is event triggered, you should click the button in the top/left corner of the screen, then the popup comes in from the left side of the window.

 

Rodrigo.

Link to comment
Share on other sites

Hi Rodrigo,

 

I refer to your posted code. I can't get it running. 

 

Thanks

 

Calvin

Link to comment
Share on other sites

For the record, Rodrigo's demo is working fine in multiple browsers for me.

Link to comment
Share on other sites

Rodrigo's example also worked for me in multiple browsers, as well :)

Link to comment
Share on other sites

I believe that the issue was that Calvin copied and pasted the code in my first reply, and that code isn't going to work, it was just to demonstrate how the popup could be build.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×