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>
run this source code Browser View

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>