Solved

opening a popup window and animate it

Posted on 2012-03-27
7
688 Views
Last Modified: 2012-06-22
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
Comment
  • 2
  • 2
  • 2
  • +1
7 Comments
 
LVL 8

Expert Comment

by:PeteEngineer
ID: 37770920
0
 
LVL 8

Expert Comment

by:PeteEngineer
ID: 37770933
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 37770935
that is good, but what about the animation i asked, how i make it look fancy
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 22

Expert Comment

by:Mrunal
ID: 37770936
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
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 37770978
Good Thanks, But i cannot use UI

just a simpledialog using the javascript or jquery and then animate it
0
 
LVL 20

Expert Comment

by:BuggyCoder
ID: 37771092
0
 
LVL 22

Accepted Solution

by:
Mrunal earned 500 total points
ID: 37771122
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question