JSFiddle - React, Tailwind, and code Playground

by Stephan Wagner

HTML

<script src="https://cdn.jsdelivr.net/gh/StephanWagner/jBox@v1.3.3/dist/jBox.all.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/StephanWagner/jBox@v1.3.3/dist/jBox.all.min.css">
<form class="my-confirm-form" action="/">
  <input type="text">
  <button type="button">Submit form</button>
</form>

<hr>

<form class="my-confirm-form" action="/">
  <input type="text">
  <button type="button">Submit form</button>
</form>
<hr>

<form class="my-confirm-form" action="/">
  <input type="text">
  <button type="button">Submit form</button>
</form>

CSS

body {
  font-family: sans-serif;
}

JavaScript

var formConfirm;

$(document).ready(function() {

  formConfirm = new jBox('Confirm', {
    confirmButton: 'Submit',
    cancelButton: 'Cancel',
    maxWidth: 450,
    maxHeight: 550,
    confirm: function() {
      submitForm();
    }
  });

  $('.my-confirm-form button').on('click', function(ev) {
    ev.preventDefault();

    formConfirm.submitFormElement = $(this).parents('form');
    formConfirm.open();
  });

});

function submitForm() {
	
  $(formConfirm.submitFormElement).submit();
  
}