jquery ui dialog live cdn

Using jQuery UI Dialog from a Live CDN#

As a web developer, I often use jQuery UI Dialog to create pop-up windows for my web applications. One way to use this library is by downloading the necessary files and linking them in your HTML code. However, another option is to use a live CDN (Content Delivery Network) to load the files and improve your website's performance.

Step 1: Link to the jQuery UI CDN#

The first step is to link to the jQuery UI CDN in your HTML code. You can do this by adding the following code in the head section of your HTML:

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

The above code will link your website to the latest version of jQuery UI from the CDN. Note that you can also choose a specific version by changing the version numbers in the links.

Step 2: Create a Dialog Box#

Once you have linked to the CDN, you can create a dialog box using jQuery UI Dialog. Here's an example:

<div id="myDialog">
  <p>This is my dialog box.</p>
</div>

<script>
  $( "#myDialog" ).dialog();
</script>

In the above code, we have created a div element with an ID of "myDialog". We then use jQuery to call the dialog() function on this element. This creates a dialog box with the default settings.

Step 3: Customize the Dialog Box#

You can customize the dialog box by passing options to the dialog() function. Here's an example:

<div id="myDialog">
  <p>This is my dialog box.</p>
</div>

<script>
  $( "#myDialog" ).dialog({
    autoOpen: false,
    width: 400,
    buttons: [
      {
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      },
      {
        text: "Cancel",
        click: function() {
          $( this ).dialog( "close" );
        }
      }
    ]
  });
</script>

In the above code, we have passed three options to the dialog() function:

• autoOpen: false - This option prevents the dialog box from opening automatically when the page loads. Instead, we will use a button to open it.
• width: 400 - This option sets the width of the dialog box to 400 pixels.
• buttons: [...] - This option creates two buttons in the dialog box. The buttons are defined as an array of objects, each containing a text property and a click property. The click property is a function that is called when the button is clicked. In this case, we simply close the dialog box.

You can customize the dialog box further by passing other options, such as title, modal, and resizable, among others. Refer to the official documentation for a full list of options.

Conclusion#

Using jQuery UI Dialog from a live CDN is a convenient way to add pop-up windows to your web applications. By following the steps outlined above, you can easily create and customize dialog boxes that look and behave the way you want them to.