JSFiddle - React, Tailwind, and code Playground

by Fantasy Land

HTML

<input type="hidden" name="delConfirm" id="delConfirm" />
    <input type="button" id="deleteButton" value="Delete My Data" />

<div id="confirmBox">
    <div class="message"></div>
    <span class="button yes">Yes</span>
    <span class="button no">No</span>
</div>

CSS

body { font-family: sans-serif; }
#confirmBox
{
    display: none;
    background-color:green;
    border-radius: 5px;
    border: 1px solid #aaa;
    position: fixed;
    width: 450px;
    height:100px;
    left: 50%;
    margin-left: -150px;
    padding: 6px 8px 8px;
    box-sizing: border-box;
    text-align: center;
}
#confirmBox .button {
    background-color: #ccc;
    display: inline-block;
    border-radius: 3px;
    border: 1px solid #aaa;
    padding: 2px;
    text-align: center;
    width: 70px;
    cursor: pointer;
}
#confirmBox .button:hover
{
    background-color: #ddd;
}
#confirmBox .message
{
    text-align: left;
    margin-bottom: 8px;
}

JavaScript

function doConfirm(msg, yesFn, noFn) {
    var confirmBox = $("#confirmBox");
    confirmBox.find(".message").text(msg);
    confirmBox.find(".yes,.no").unbind().click(function () {
        confirmBox.hide();
    });
    confirmBox.find(".yes").click(yesFn);
    confirmBox.find(".no").click(noFn);
    confirmBox.show();
}


   $('#deleteButton').click(function (e) {
       
        e.preventDefault();
        doConfirm("Are you sure you want to delete the selected Invoices?", 
           function yes() {
            alert("yes option selected..");
            $("#delConfirm").val('true');
               alert("hidden value assigned..."+$('#delConfirm').val());
            $.ajax({
url: "<s:url action='/echo/html/'/>?delConfirm="+$('#delConfirm').val(),
            type: "POST",
			cache: false											
			}).done(function(msg) {							
				$("#confirmBox").html(msg);
			});	
            }, function no() {
            alert("No selected....");
                $("#delConfirm").val('false');
            // do nothing
        });
    });