JSFiddle - React, Tailwind, and code Playground

by zerolfc

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
<button type="button" id="confirm">
  Delete Me
</button>

<div id="uimodal-output" title="Security" style="display: none;">
  <form role="form" id="form">
    <input type="password" name="pwd" placeholder="password" required>
    <button type="submit" class="submit-orange">Submit</button>
  </form>
</div>

JavaScript

$(function() {

  // return true or false
  const securityPrompt = function() {

    $('#uimodal-output').dialog({
      modal: true,
      width: 'auto',
      resizable: false,
      open: function(e, ui) {

        $('#form').submit(function(e) {

          $.ajax({
            type: 'post',
            url: '//',
            data: $(this).serialize(),
            dataType: 'json',
            cache: false,
            success: function(result) {

              if (result.valid) {
                return true;
              }

            }
          });

          e.preventDefault();

        });

      }
    });

  }



  $('#confirm').click(function() {

    let isValid = true;

    let validated = securityPrompt();

    if (!validated) isValid = false;

    if (!isValid) {
      alert('password is wrong');
    } else {

      if (confirm('Are you sure?')) {

        console.log('deleted');

      }

    }


    return false;

  });

});