Jquery UI Dialog Box

Jquery UI opens a dialog box as a popup or alert box. It is by default drag-able and resize-able. You can use options of dialog() widget to enable-disable these features.

Jquery UI dialog box is an enhanced way to show any message on a dialog box. Users can cut it using the cross sign on the top right corner.

If you want to add custom buttons in the dialog box, for example, the "OK" button, "CANCEL" button then you need to use buttons option of the dialog() method. More options for the dialog() are given below.

Jquery UI dialog documentation

Create a <div></div> element.
Set any class value to it <div class="dia-box"></div>.
The title attribute in the DIV will be the header of the dialog box.
The content you want to appear in the dialog's body should be written in the
<div class="dia-box"> <p>Dialog content goes here</p> </div> element.
Apply the dialog() method in the DIV in jquery script code. That's all.

Example:-

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Dialog</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<style>.dia-box{display:none}</style>
</head>
<body>
<button class="btn">Show Dialog</button>
<div title="Are you sure?" class="dia-box">
<p>Click on OK to continue.</p>
</div>

<script>
  $(document).ready(function(){
    $(".btn").button().click(function(){
      $(".dia-box").dialog();
    });
  });

</script>
</body>
</html>

Options of Jquery UI's dialog()

Property	Value
draggable	false, true
resizable	true, false
width	200px (in pixel or percentage)
height	150px (in pixel or percentage)

draggable Option

The draggable option has two values true (Default value)and false. Users can drag and drop it on any position on the screen. You can disable this feature when its value is set to false.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Dialog</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<style>.dia-box{display:none}</style>
</head>
<body>
<button class="btn">Show Dialog</button>
<div title="Are you sure?" class="dia-box">
<p>Click on OK to continue.</p>
</div>

<script>
  $(document).ready(function(){
    $(".btn").button().click(function(){
      $(".dia-box").dialog({
        draggable:false,
      });
    });
  });

</script>
</body>
</html>

resizable Option

This disables the resizing feature of dialog. Set its value to false to prevent resizing.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Dialog</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<style>.dia-box{display:none}</style>
</head>
<body>
<button class="btn">Show Dialog</button>
<div title="Are you sure?" class="dia-box">
<p>Click on OK to continue.</p>
</div>

<script>
  $(document).ready(function(){
    $(".btn").button().click(function(){
      $(".dia-box").dialog({
        draggable:false,
        resizable:false,
      });
    });
  });

</script>
</body>
</html>

width and height Options

Set the width and height of the dialog when it appears to the users. Do not use px after the numeric value (Use like this width:200 not width:200px) and if you want to give width & height in percentage the property value must be surrounded by a double or single quote.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Dialog</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<style>.dia-box{display:none}</style>
</head>
<body>
<button class="btn">Show Dialog</button>
<div title="Are you sure?" class="dia-box">
<p>Click on OK to continue.</p>
</div>

<script>
  $(document).ready(function(){
    $(".btn").button().click(function(){
      $(".dia-box").dialog({
        draggable:false,
        resizable:false,
        width:'60%',
        height:200,
      });
    });
  });

</script>
</body>
</html>

Add show and hide effects

You can display and hide dialog in an effect like slide, fade, etc. Check - Jquery UI effect names

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Dialog</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<style>.dia-box{display:none}</style>
</head>
<body>
<button class="btn">Show Dialog</button>
<div title="Are you sure?" class="dia-box">
<p>Click on OK to continue.</p>
</div>

<script>
  $(document).ready(function(){
    $(".btn").button().click(function(){
      $(".dia-box").dialog({
        draggable:false,
        resizable:false,
        width:'60%',
        height:200,
        show:{
          effect:"slide",
          duration:1500
        },
        hide:{
          effect:"bounce"
        },
      });
    });
  });

</script>
</body>
</html>

buttons Option

Use buttons event to add any button in the dialog box.

CANCEL button Example

"cancel":function(){
            $(this).dialog("close");
          }

OK button example

"Ok":function(){         location.href="https://www.google.com/";
          }

Example~

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Dialog</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<style>.dia-box{display:none}</style>
</head>
<body>
<button class="btn">Show Dialog</button>
<div title="Are you sure?" class="dia-box">
<p>Click on OK to continue.</p>
</div>

<script>
  $(document).ready(function(){
    $(".btn").button().click(function(){
      $(".dia-box").dialog({
        draggable:false,
        resizable:false,
        width:'60%',
        height:200,
        buttons:{
          "cancel":function(){
            $(this).dialog("close");
          },
          "Ok":function(){
            location.href="https://www.google.com/";
          }
        },
      });
    });
  });

</script>
</body>
</html>