Build jQuery UI Dialog - Modal confirmation in JavaScript
Description
The following code shows how to build jQuery UI Dialog - Modal confirmation.
Example
<!-- Revised from demo code on http://jqueryui.com/ -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal confirmation</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" />
<!-- w ww . j a va 2 s .c om-->
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
</head>
<body>
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</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>Confirm an action that may be destructive or important. Set the <code>modal</code> option to true, and specify primary and secondary user actions 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 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