JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" method="post">
    <input type="text" name="firstname">
    <input type="submit" value="Test">
</form>
<div class="overlay"></div>
<div class="msgbox"></div>

CSS

.overlay {
    display: none;
    position: fixed;
    top: 0; bottom: 0; left: 0; right: 0;
    background-color: black;
    opacity: .7;
}
.msgbox {
    display: none;
    position: fixed; top: 50px; left: 50px; /* лень центрировать */
    padding: 1em;
    background-color: pink;
    font-size: 200%;
    font-weight: bold;
}

JavaScript

$('form').on('submit', function(){
    // здесь проверяем что хотим, показываем ошибки
    var firstname = $(this).find('input[name="firstname"]')
    if (firstname.val().length == 0) {
        showPopup('First name empty!!111');
        return false;
    }
    // если всё ок
    return true;
})

showPopup = function(text){ // показываем попап
    $('.overlay').show()
    $('.msgbox').html(text).show()
}
$('.overlay').on('click', function(){ // скрываем попап при клике на оверлей
    $('.overlay').hide()
    $('.msgbox').hide()
})