JQuery UI Dialog Example

Jqury UI

Nicesnippets

2656

08-06-2020


JQuery UI Dialog Example

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


Recommended Posts