JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.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 alert() {
    var result = true;
        var hide = $(this).fadeOut(100);
        var css = $('#appriseOverlay').css('display','none');
        var $alertDiv = $('<div class="alert">Do you wan\'t to delete this item?<button class="ok">ok</button><button class="cancel">cancel</button></div>');
        $('body').append($alertDiv);
        $('.ok').click(function () {
            $('.alert').fadeOut(100);
            $('#appriseOverlay').css('display','none');
            return true;
        });
        $('.cancel').click(function () {
            $('.alert').fadeOut(100);
            $('#appriseOverlay').css('display','none');
            result = false;
        });
        $alertDiv.fadeIn(100);
        $('#appriseOverlay').css('display','block');
    return result;
    };
$('.iu').click(function() {
    if(alert() == true){
        alert('ok')
    }else{
        alert('no')
    }
});