JSFiddle - React, Tailwind, and code Playground

HTML

<button id="call">Кликермен</button>

<div id="hover"></div>

<div id="popup">
    <form action="mail.php" method="post" name="form_com">

        <p class="names"><label>Ваше имя:</br> </label><input name="author" type="text"
        size="40" maxlength="30" class="nameform"></p>
        <p class="names"><label>Ваш номер телефона:</br> </label><input name="phone" type="text"
        size="40" maxlength="30" class="nameform"></p>
        
        <p class='buttons'><input name="sub_com" type="submit" value="Перезвонить Вам!" class="but"></p>
    
    </form>
</div>

CSS

* {
    padding:0;
    margin:0;
    position:relative;
}
html, body {
    height: 100%;
}
#call {
    width:228px;
    height:200px;
    position: relative;
    z-index: 9;
}
#popup {
    display: none;
    border:1px solid #cccccc;
    width:325px;
    height:215px;
    background:#f6f6f6;
    position:absolute;
    z-index:999;
    margin-left:-162px;
    margin-top:-107px;
    left:50%;
    top:50%;
}
#hover {
    display: none;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    position:absolute;
    top:0;
    left:0;
    z-index: 8;
}
.but {width:200px;height:50px;}
.buttons {text-align:center;}
.names {margin:20px;}
.nameform {width:275px;}

JavaScript

$(document).ready(function() {

    $("#call").click(function (event){
        $("#popup").css("display","block");
        $("#hover").css("display","block");
    });

});