JSFiddle - React, Tailwind, and code Playground

by 1eddy87

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/3.1.1/css/vex.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/3.1.1/css/vex-theme-plain.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vex-js/3.1.1/js/vex.combined.min.js"></script>
<button class="test1">test1</button>
<br />
<button class="test2">test2</button>

JavaScript

vex.defaultOptions.className = 'vex-theme-plain';

$('.test1').click(function() {
  vex.dialog.open({
    message: 'test1:',
    input: [
      '<input class="test1" name="test1" type="text" placeholder="test1" required />'
    ].join(''),
    buttons: [
      $.extend({}, vex.dialog.buttons.YES, {
        text: 'test1'
      }),
      $.extend({}, vex.dialog.buttons.NO, {
        text: 'Back'
      })
    ],
    callback: function(data) {
      if (!data) {
        console.log('Cancelled')
      } else {
        console.log('test1', data.test1)
      }
    }
  })
});

$('.test2').click(function() {
  vex.dialog.open({
    message: 'test2:',
    input: [
      '<input class="test2" name="test2" type="text" placeholder="test2" required />'
    ].join(''),
    buttons: [
      $.extend({}, vex.dialog.buttons.YES, {
        text: 'test2'
      }),
      $.extend({}, vex.dialog.buttons.NO, {
        text: 'Back'
      })
    ],
    callback: function(data) {
      if (!data) {
        console.log('Cancelled')
      } else {
        console.log('test2', data.test2)
      }
    }
  })
});

$(document).keydown('.test1', function(e) {
  console.log('testing test1');
});