Create a Fade in/out dialog in JavaScript
Description
The following code shows how to create a Fade in/out dialog.
Example
<!--from w w w .ja v a 2s.com-->
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script type='text/javascript'>
$(document).ready(
function() {
$('input#tmpOpen').click(
function($e) {
$('div#myDialog').fadeIn(5000);
}
);
$('input#tmpClose').click(
function($e) {
$('div#myDialog').fadeOut(5000);
}
);
}
);
</script>
<style type='text/css'>
div#myDialog {
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 200px;
margin: -100px 0 0 -250px;
background: rgb(233, 233, 233);
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>
The code above generates the following result.
Javascript Tutorial Dialog
Add Dialog animation for close event in Jav...
Add ok button to dialog and link with event...
Build jQuery UI Dialog - Animation in JavaS...
Build jQuery UI Dialog - Basic modal in Jav...
Build jQuery UI Dialog - Default functional...
Build jQuery UI Dialog - Modal confirmation...
Build jQuery UI Dialog - Modal form in Java...
Build jQuery UI Dialog - Modal message in J...
Close dialog after pressing OK button in Ja...
Destroy a dialog in JavaScript
Display a dialog to hold the date picker in...
Get the input value from a dialog in JavaSc...
Handle Dialog open/close event in JavaScrip...
Handle dialog Closed action in JavaScript
Open a dialog through a button click event ...
Open div tag based dialog with animation in...
Set dialog height in JavaScript
Add Dialog animation for close event in Jav...
Add ok button to dialog and link with event...
Build jQuery UI Dialog - Animation in JavaS...
Build jQuery UI Dialog - Basic modal in Jav...
Build jQuery UI Dialog - Default functional...
Build jQuery UI Dialog - Modal confirmation...
Build jQuery UI Dialog - Modal form in Java...
Build jQuery UI Dialog - Modal message in J...
Close dialog after pressing OK button in Ja...
Create a Fade in/out dialog in JavaScript
Create a model dialog and turn off auto ope...Destroy a dialog in JavaScript
Display a dialog to hold the date picker in...
Get the input value from a dialog in JavaSc...
Handle Dialog open/close event in JavaScrip...
Handle dialog Closed action in JavaScript
Open a dialog through a button click event ...
Open div tag based dialog with animation in...
Set dialog height in JavaScript