Solved

opening a popup window and animate it

Posted on 2012-03-27
7
686 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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

792 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