Destroy a dialog in JavaScript

Description

The following code shows how to destroy a dialog.

Example


<!--from ww w . j a  v a2 s . c  o m-->


<!doctype html>
<html lang="en">
<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">
$(function() {
var doOk = function() {
$("#myDialog").dialog("close");
}
var dialogOpts = {
modal: true,
buttons: {
"Ok!": doOk
},
height: "400px",
autoOpen: false
};
$("#myDialog").dialog(dialogOpts);
$("#openDialog").click(function() {
$("#myDialog").dialog("open");
});
$("#destroy").click(function() {
$("#myDialog").dialog("destroy");
});
});
</script>
</head>
<body>
<button id="openDialog">Open the Dialog!</button>
<button id="destroy">Destroy the dialog!</button>
<div id="myDialog" class="flora" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat ligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est. Ut posuere, mauris at sodales rutrum, turpis tellus fermentum metus, ut bibendum velit enim eu lectus. Suspendisse potenti. Donec at dolor ac metus pharetra aliquam. Suspendisse purus. Fusce tempor ultrices libero. Sed quis nunc. Pellentesque tincidunt viverra felis. Integer elit mauris, egestas ultricies, gravida vitae, feugiat a, tellus.</div>

</body>
</html>

Click to view the demo

The code above generates the following result.

Destroy a dialog in JavaScript