Build jQuery UI Dialog - Modal message in JavaScript
Description
The following code shows how to build jQuery UI Dialog - Modal message.
Example
<!-- Revised from demo code on http://jqueryui.com/ -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal message</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 ww . j a v a 2 s .c o m-->
<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this?).dialog( "close" );
}
}
});
});
</script>
</head>
<body>
<div id="dialog-message" title="Download complete">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</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>Use a modal dialog to explicitly acknowledge information or an action before continuing their work. Set the <code>modal</code> option to true, and specify a primary action (Ok) with the <code>buttons</code> option.</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 - Basic modal in Jav...
Build jQuery UI Dialog - Default functional...
Build jQuery UI Dialog - Modal confirmation...
Build jQuery UI Dialog - Modal form in Java...
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