I have a simple overlay in a custom plugin I made that I'd like to display for my WordPress blog, but the overlay won't appear outside of the shortcode block. Here's my code,

plugin.php

    <?php
    function styleSetup() {
    wp_register_style('plugin-style', plugins_url('styles.css', __FILE__));
    wp_enqueue_style('plugin-style');
    }
add_action('wp_enqueue_scripts', 'styleSetup'); 
    function display_content() {
        ob_start(); ?>
    <div id="userConfirmationOverlay" class="overlay">
        <div id="userConfirmationBox" class="overlayBox">
            <h1>Is this you?</h1>
            <div id="avatar-image-container"></div>
        </div>
    </div>
        <form id="login-form" action="#" method="post">
            <input type="text" id="username" name="username" placeholder="Enter your username">
            <button type="submit">Get Avatar</button>
        </form>
    <script>
        document.getElementById('login-form').addEventListener('submit', function(event) {
        event.preventDefault();
        username = document.getElementById('username').value;
        console.log(username);
        openConfirmationOverlay;
    });
    function openConfirmationOverlay() {
    document.getElementById('userConfirmationOverlay').style.display = 'block';
    }
    </script>
    <?php>
    return ob_get_clean();
    }

styles.css:

.overlay {
    z-index: 3;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    overflow-x: hidden;
    display: none;
    position: fixed;
}

.overlayBox {
    position: relative;
    text-align: center;
    height: 50px;
    width: 50px;
}
add_shortcode('avatar_form', 'display_content');

How can I get the overlay to display on the whole page?