Skip to content

All topics  /  jQuery

JQuery UI Dialog Example

jQuery

Jun 08, 2020

Hi Guys,

In this Example,I will learn you how to create dialog box in jquery ui.you can easy to use dialog box in jquery ui.

jQueryUI dialog method is used to create a basic dialog window inside the page. It has a title bar and a content area and can be moved, resized and closed with the ‘X’ icon by default.

Example :


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog Example</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha256-rByPlHULObEjJ6XQxW/flG2r+22R5dKiAoef+aXWfik=" crossorigin="anonymous" />
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
  <h2>jQuery UI Dialog Example - NiceSnippets.com</h2>
  <div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
  </div>

 
  <script>
  $( function() {
    $( "#dialog" ).dialog();
  } );
  </script>

 
</body>
</html>

It will help you...

More on this topic