Jquery UI Dialog Box

Date Published: 08/05/2020 Published By: JaiSchool

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()

PropertyValue
draggablefalse, true
resizabletrue, false
width200px (in pixel or percentage)
height150px (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{084fae9a6ee6da5a140e203e4160c172c943a2d77bb1f312784b18f1e0e553dc}',
        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{084fae9a6ee6da5a140e203e4160c172c943a2d77bb1f312784b18f1e0e553dc}',
        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{084fae9a6ee6da5a140e203e4160c172c943a2d77bb1f312784b18f1e0e553dc}',
        height:200,
        buttons:{
          "cancel":function(){
            $(this).dialog("close");
          },
          "Ok":function(){
            location.href="https://www.google.com/";
          }
        },
      });
    });
  });

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

Publish A Comment

Leave a Reply

Your email address will not be published.