JSFiddle - React, Tailwind, and code Playground

HTML

<div class="example">

  <div>
    <button id="toggle1">Open dialog 1</button>
    <button id="toggle2">Open dialog 2</button>
    <button id="toggle3">Open dialog 3</button>
    <button id="toggle4">Open dialog 4</button>

  </div>



  <div>
    <div id="dialog1" title="Dialog #1">
      <p>This dialog using 'slide/explode' methods to show/hide, plus, can be closed by 'close' button, by 'x' icon and by 'esc' button. This dialog window can be moved using mouse.</p>
    </div>

    <div id="dialog2" title="Dialog #2">
      <p>This dialog using 'blind/fold' methods to show/hide, plus, can be closed by 'x' icon and by 'esc' button. This dialog window can be moved and resized using mouse.</p>
    </div>
    <div id="dialog3" title="Dialog #3">
      <p>This dialog using 'blind/fold' methods to show/hide, plus, can be closed by 'x' icon and by 'esc' button. This dialog window can be moved and resized using mouse.</p>
    </div>
    <div id="dialog4" title="Dialog #4">
      <p>This dialog using 'blind/fold' methods to show/hide, plus, can be closed by 'x' icon and by 'esc' button. This dialog window can be moved and resized using mouse.</p>
    </div>




  </div>

</div>

JavaScript

$(function() {

  // dialog 2 properties
  $('#dialog1').dialog({
    autoOpen: false,
    show: {
      effect: "blind",
      duration: 1000
    },
    hide: {
      effect: "explode",
      duration: 1000
    }
  });

  $('#dialog2').dialog({
    autoOpen: false,
    show: {
      effect: "blind",
      duration: 1000
    },
    hide: {
      effect: "explode",
      duration: 1000
    }
  });

  $('#dialog3').dialog({
    autoOpen: false,
    show: {
      effect: "blind",
      duration: 1000
    },
    hide: {
      effect: "explode",
      duration: 1000
    }
  });

  $('#dialog4').dialog({
    autoOpen: false,
    show: {
      effect: "blind",
      duration: 1000
    },
    hide: {
      effect: "explode",
      duration: 1000
    }
  });

  // dialog 2 open/close
  $('#toggle1').click(function() {
    if ($('#dialog1').dialog('isOpen') == true)
      $('#dialog1').dialog('close');
    else
      $('#dialog1').dialog('open');


    return false;
  });
  $('#toggle2').click(function() {
    if ($('#dialog2').dialog('isOpen') == true)
      $('#dialog2').dialog('close');
    else
      $('#dialog2').dialog('open');

    return false;
  });
  $('#toggle3').click(function() {
    if ($('#dialog3').dialog('isOpen') == true)
      $('#dialog3').dialog('close');
    else
      $('#dialog3').dialog('open');

    return false;
  });
  $('#toggle4').click(function() {
    if ($('#dialog4').dialog('isOpen') == true)
      $('#dialog4').dialog('close');
    else
      $('#dialog4').dialog('open');

    return false;
  });

});
$.widget("ui.dialog", $.ui.dialog, {
  options: {
    clickOutside: false, // Determine if clicking outside the dialog shall close it
    clickOutsideTrigger: "" // Element (id or class) that triggers the dialog opening 
  },

  open: function() {
    var clickOutsideTriggerEl = $(this.options.clickOutsideTrigger);
    var that = this;

    if (this.options.clickOutside) {
      // Add document wide click handler for the current dialog...