• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 718
  • Last Modified:

opening a popup window and animate it

Hi, i want to open a div as a popup window and i want that when i click the click, it should give an animate effect to open, like

it should start from middle and expand to its width, or a slidedown or slideup effect or flip effect.

how this can be achieved, i m scratching my head from last couple of hours could not get it done
0
Gurpreet Singh Randhawa
Asked:
Gurpreet Singh Randhawa
  • 2
  • 2
  • 2
  • +1
1 Solution
 
PeteEngineerCommented:
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
that is good, but what about the animation i asked, how i make it look fancy
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
MrunalCommented:
Hi,
You can use show option with different values for jQuery Dialog.
Like:

$('#dialog').dialog({
autoOpen: false,
show: 'blind',
hide: 'explode'
});

Open in new window


Here is reference:

http://jquery-ui.googlecode.com/svn/trunk/demos/dialog/animated.html

http://jqueryui.com/demos/dialog/#option-show
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
Good Thanks, But i cannot use UI

just a simpledialog using the javascript or jquery and then animate it
0
 
MrunalCommented:
Hi, If you not wishing to use UI, then you have to manually manage those all things...

Steps:
1. On document ready, bind click event to trigger to open popup.
2. From this JavaScript function, do followings:
-> Make that DIV as centered (using CSS)
-> Make it visible.

Here is reference:

http://yensdesign.com/tutorials/popupjquery/

Another example:

http://stackoverflow.com/questions/1328723/how-to-generate-a-simple-popup-using-jquery
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 2
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now