JSFiddle - React, Tailwind, and code Playground

by Cerlin ST

HTML

<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <title>jQuery UI Dialog - Modal confirmation</title>
<div id="dialog-confirm" title="Alert" style="display:none">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>What is your dominant hand?</p>
    
</div>
 
<button id="showdialog">Click Me to open dialog</button>

JavaScript

$(function() {
    $( "#dialog-confirm" ).dialog({
        resizable: false,
        height: 140,
        autoOpen: false,
        modal: true,
        buttons: {
            "Left": function() {
                alert('Left is selected');
                // Use ajax or a normal http request (get or post) to send the data to server
            },
            "Right": function() {
                alert('Right is selected');                
                // Use ajax or a normal http request (get or post) to send the data to server
            }
        }
    });
    $('#showdialog').click(function(){
        $( "#dialog-confirm" ).dialog('open');
    })
});