modal

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Modal</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html, body {
            width: 100%;
            height: 100%;
        }
        #modal {
            top: 0;
            left: 0;
            width: 100%;
            z-index: 10;
            height: 100%;
            display: none;
            position: absolute;

            background: rgba(0, 0, 0, 0.8);
        }
        #modal #textbox {
            width: 60%;
            background: white;
            text-align: center;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <input type="text" id="mensagem">
    <button onclick="modal()">Abrir Modal</button>

    <div id="modal">
        <center>
            <div id="textbox">
                <div id="texto"></div>
                <button onclick="fechaModal()">Fechar</button>
            </div>
        </center>
    </div>
    <script type="text/javascript">
        function fechaModal() {
            document.getElementById("modal").style.display = "none";
        }
        function trocaModal(text) {
            document.getElementById("texto").innerHTML = text;
            document.getElementById("modal").style.display = "block";
        }
        function modal() {
            var msg = document.getElementById("mensagem").value
            trocaModal(msg);
        }
    </script>
</body>
</html>