jQuery UI Dialog
As the name implies, a dialog box serves to initiate a dialog with the user. It is a window that pops up on the screen with options that the user can interact. The dialog window can be moved, resized and closed with the 'x' icon.
$( "#dialog" ).dialog();
<div id="dialog">Text here....<div>
Browser ViewThe dialog window can be moved, resized and closed with the 'x' icon.
<html>
<head>
<title>jQuery UI</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
});
$( "#btnShow" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="btnShow">Show Dialouge</button>
</body>
</html>
Related Topics