JSFiddle - React, Tailwind, and code Playground

by Rupali Soni

HTML

<div  id="instructor-dialog" title="Instructor Dialog" style="display:none;">
  <fieldset>
    <legend>Instructor Information :</legend>
    <div id="instructorMessages" style="display:none;"></div>
    <div id="instructorContainer"></div>
  </fieldset>
</div>
<a href="javascript:void(0);" id="show">Show Dialog</a>

JavaScript

function loadInstructorDialog(id) {
  $(function () {
    $("#instructor-dialog").dialog({
        autoOpen: false,
        //height: getDialogHeight(700),
       // width: getDialogWidth(700),
        modal: true,
        buttons: {
            "Close Window": function () {
                $(this).dialog("close");
            }
        },
        open: function () {
            $('#instructorMessages').empty();
            $('#instructorMessages').hide();
            //ajLoadInstructorAddEditForm(id, 'instructorContainer', 'instructorMessages');
        },
        close: function () {
            $('#instructorContainer').empty();
            $(this).dialog("close");
        }
    });
  });
  $("#instructor-dialog").dialog("open");
}

$("#show").click(function(){
    loadInstructorDialog(1);
});