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>

Try it Yourself

The dialog window can be moved, resized and closed with the 'x' icon.

Full Source

 
<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>

Next : JqueryUI Draggable