JSFiddle - React, Tailwind, and code Playground

HTML

<body id="bdy" onclick="check()" style="overflow:auto;">
    <div id="ric">
        <!-- Popup div starts here -->
        <div id="popupContact">
            <!-- contact us form -->
            <form action="#" method="post" id="form">...</form>
        </div>
        <!-- Popup div ends here -->
    </div>
    <!-- display popup button -->
    <CENTER>
        <h1>Click Button To Popup Form Using Javascript</h1>

        <button id="popup">Popup</button>
    </CENTER>
</body>

CSS

#ric{
    width: 100%;
    height: 100%;
    opacity: 0.95;
    top: 0;
    left: 0;
    display: none;
    position: fixed;
    background-color: #313131;
    overflow:auto;
}

JavaScript

function check_empty(){
if(document.getElementById('name').value == "" 
|| document.getElementById('email').value == "" 
||document.getElementById('msg').value == "" ){
alert ("Fill All Fields !");
}
    else {  
    document.getElementById('form').submit();  
    alert ("Form submitted successfully...");
    }
}
$('#popup').click(function(){
   document.getElementById('ric').style.display = "block";
})

//function to check target element
function check(e){ 
var target = (e && e.target) || (event && event.srcElement); 

var obj = document.getElementById('ric'); 
var obj2 = document.getElementById('popup'); 

checkParent(target)?obj.style.display='none':null; 
target==obj2?obj.style.display='block':null; 

} 

//function to check parent node and return result accordingly
function checkParent(t){ 
    while(t.parentNode){ 
        if(t==document.getElementById('ric'))
            { 
                return false ;
            }
        else if(t==document.getElementById('close'))
            {
                return true;
            } 
        t=t.parentNode ;
    } 
    return true ;
}