Show a Div based Dialog in animation in jQuery

Description

The following code shows how to show a Div based Dialog in animation.

Example


<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script><!--from   w w  w . j av  a2  s  . c  o m-->

<script type='text/javascript'>
$(document).ready(
function() {
$('input#tmpOpen').click(
function($e) {
$('div#myDialog').show(5000);
}
);

$('input#tmpClose').click(
function($e) {
$('div#myDialog').hide(5000);
}
);
}
);
</script>
<style type='text/css'>
div#myDialog {
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 200px;
margin: -101px 0 0 -251px;
border: 1px solid rgb(128, 128, 128);
}

div#tmpButtons {
position: absolute;
bottom: 5px;
right: 5px;
}
</style>
</head>
<body>
<input type='submit' id='tmpOpen' value='Open' />
<div id='myDialog'>
<p>
Dialog content
</p>
<div id='tmpButtons'>
<input type='submit' id='tmpClose' value='Close' />
</div>
</div>
</body>
</html>

Click to view the demo

The code above generates the following result.

Show a Div based Dialog in animation in jQuery

Home »
  Javascript Tutorial »
    jQuery »
      jQuery Animation

...
Fade to a certain opacity in jQuery
Fade to and call a function in jQuery
Fade to random seconds in jQuery
Fast fade in jQuery
Fast fade in in jQuery
Fast fade out a button in jQuery
Fast fade out in jQuery
Fast fade to in jQuery
Fast slide toggle animation in jQuery
Header fade in and fade out in jQuery
Hide and Slide down animation in jQuery
Hide and remove animation in jQuery
Hide fast animation in jQuery
Hide in millisecond animation in jQuery
Move an element by changing left during ani...
Pass arguments.callee to show callback func...
Queue a custom function in jQuery
Replace the queue of all matched element wi...

Show a Div based Dialog in animation in jQu...