JSFiddle - React, Tailwind, and code Playground

by patrick29

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class='dialog' title='Test'>
  <form method='post' action='test.php'>
    <label for='current_password'>Password</label>
    <input type='password' name='test_password' size='32' maxlength='32' id='test_password' value='' autocomplete='off'/>
	</form>
</div>

JavaScript

$(document).ready(function() {
	"use strict";
	
	$('.dialog').dialog({
		autoOpen: true,
		modal: true,
		width: 'auto',
		buttons: {
			ok: {
				text: "Ok",
				id: "ok_button",
				click: function() {
					submit();
				}
			},
			cancel: {
				text: "Cancel",
				id: "cancel_button",
				click: function() {
					$(this).dialog("close");
				}
			}
		}
	});
  
	$('.dialog').on('keypress', function(e) {
		if (e.keyCode == $.ui.keyCode.ENTER) {
			submit();
		}
	});
  
  function submit() {
  	alert('ok');
    $('.dialog form').hide();
  }
  
	$('.dialog form').on('submit', function(e) {
		e.preventDefault();
	});

});