Build jQuery UI Dialog - Basic modal in JavaScript
Description
The following code shows how to build jQuery UI Dialog - Basic modal.
Example
<!-- Revised from demo code on http://jqueryui.com/ -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Basic modal</title>
<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" />
<!--from w w w. j a v a 2 s . c om-->
<script>
$(function() {
$( "#dialog-modal" ).dialog({
height: 140,
modal: true
});
});
</script>
</head>
<body>
<div id="dialog-modal" title="Basic modal dialog">
<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
<div class="demo-description">
<p>A modal dialog prevents the user from interacting with the rest of the page until it is closed.</p>
</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 - 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
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