JSFiddle - React, Tailwind, and code Playground

HTML

<input id="btn" type="button" value="Click Me" />

CSS

.overlayer {
  opacity: 0.5;
  filter: alpha(opacity=50);
  background-color: white;
  background: #ffffff;
}

JavaScript

$(document).on("click", "#btn", function() {
	var offset = 0; // Math.abs($(window).height() - $('#canvas').height());
  
  $('<div id="dlg"></div>').dialog({
    modal: false,
    position: 'bottom',
    title: "Confirmation",
    dialogClass: 'overlayer',
    position: {
      my: 'left bottom',
      at: 'left bottom-' + offset
    },
    open: function() {
      $(this).find("[type=submit]").hide();

      var markup = 'Hello World<br>';
      markup += '<form id="myForm">';
      markup += '<label for="search">Level:</label>';
      markup += '<input type="text" id="search" name="q">';
      markup += '</form>';
      $(this).html(markup);

      $("#myForm").submit(function(e) {
        e.preventDefault();
        changeLevelClicked(search.value);
      });

      //$('#myForm').submit(changeLevelClicked);
    },
    buttons: [{
      text: "Ok",
      click: $.noop,
      type: "submit",
      form: "myForm", // <-- Make the association
      //Ok: function () {
      click: function() {
        $(this).dialog("close");
        //$("#dlg").remove();
      }
    }]
  }); //end confirm dialog

});

function changeLevelClicked(level) {
  console.log("changeLevelClicked", level);
}