JSFiddle - React, Tailwind, and code Playground

HTML

<div id="appriseOverlay" style="height: 2040px; width: 1343px;"></div>
<a href="#" class="click">Click Me</a>

CSS

.click{
    top: 500px;
    position: absolute;
}
.alert {
    width: 200px;
    height: 80px;
    background: red;
    text-align: center;
    margin: 0px auto;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
    z-index: 99999999;
}
#appriseOverlay {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}

JavaScript

function myalert() {
        var result = true;
        //var hide = $('.alert').fadeOut(100);
        //var css = $('#appriseOverlay').css('display','none');
        var $alertDiv = $('<div class="alert">Are you sure you want to delete this item?<div class="clear"></div><button class="ok">no</button><button class="cancel">yes</button></div>');
        var link = this;
        $('body').append($alertDiv);
        $('.ok').click(function () {
            $('.alert').fadeOut(100);
            $('#appriseOverlay').css('display', 'none');
            callback(true, link);
        });
        $('.cancel').click(function () {
            $('.alert').fadeOut(100);
            $('#appriseOverlay').css('display', 'none');
            callback(false, link);
        });
        $alertDiv.fadeIn(100);
        $('#appriseOverlay').css('display', 'block');
        return result;
    };
$('.click').click(myalert);
    function callback(result, link) {
        //
        if(result){
        }
    }