JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form1" action="">Nome:
    <input type="text" name="name" value="Nome" />
    <br/>Sobrenome:
    <input type="text" name="sname" value="Sobrenome" />
    <br/>
    <br/>
</form>
<button onclick="takeValue()">mostra valor</button>
<p id="teste"></p>
<div id="overlay">
    <div id="dialog">
        <div id="dialogContent"></div>
        <div id="fechar" onclick="fechar()">X</div>
    </div>
</div>

CSS

#overlay {
    display:none;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9000;
    vertical-align: middle;
}
#dialog {
    background-color: #ddf;
    position: relative;
    width: 300px;
    height: 100px;
    padding: 10px;
    margin: 0 auto;
    top: 20%;
    border: 1px solid black;
    z-index: 9001;
    border: 2px solid black;
    border-radius: 5px;
}
#fechar {
    position: absolute;
    bottom: 5px;
    right: 7px;
    cursor:pointer;
}

JavaScript

function takeValue() {
    var x = document.getElementById("form1");
    var texto = "";
    var i;
    for (i = 0; i < x.length; i++) {
        texto += x.elements[i].value + "<br>";
    }

    document.getElementById("teste").innerHTML = texto;
    var infoText;
    if (texto == "Nome<br>Sobrenome<br>") {
        infoText = "SUCESSO";
    } else {
        infoText = "ERRO";
    }
    document.getElementById('dialogContent').innerHTML = infoText;
    document.getElementById('overlay').style.display = 'block';

}

function fechar() {
    document.getElementById('overlay').style.display = 'none';
}