//PARTIE JAVASCRIPT
    <script>
        function toggleOverlay()
        {
            document.body.className = document.body.className.indexOf('overlaid') != -1 ? '' : 'overlaid';
        }
        document.addEventListener('DOMContentLoaded', function()
        {
            document.querySelector('.overlay').addEventListener('click', function(ev)
            {
                if (/overlay|wrap/.test(ev.target.className)) toggleOverlay();
            });
        });
    </script>

//PARTIE PHP
$popup = <<<EOT
        <div class="overlay">
            <div class="wrap-outer">
                <div class="wrap">
                    <div class="login">
                        <h1>Connexion</h1>
                        <hr/>
                        <form method="GET" action="./accueil.php">
                            <input type="text" style="border-style: solid; border-width: 1px; border-color: grey;" name="login" value="Login" onclick="this.value='';"/>
                            <input type="password" style="border-style: solid; border-width: 1px; border-color: grey;" name="password" value="123456" onclick="this.value='';"/><br/>
                            <input style="cursor:pointer; border:none; font-family:bellerose;color:grey;font-size:21px; background:none;" type="submit" value="Se Connecter">
                        </form>
                    </div>
                </div>
            </div>
        </div>
EOT;

//PARTIE CSS
/* Popup de connexion */
body.overlaid .overlay
{
    transform: translateY(0);
    z-index:20;
}

.overlay
{
    transform: translateY(-50000px);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index:20;
}
.overlay > .wrap-outer
{
    position: relative;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    box-align: stretch;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    z-index:20;
}
.overlay > .wrap-outer > .wrap
{
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    box-align: stretch;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    z-index:20;
}

.overlay > .wrap-outer > .wrap > *
{
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    display: block;
    z-index:20;
}

.login
{
    width: 400px;
    background: #080808;
    border-radius: 10px;
    padding: 15px;
    color: grey;
    font: 18px "bellerose";
    text-align:center;
    border-color:white;
    border:solid;
    z-index:20;
}

.login h1
{
    margin: 0 0 15px;
    color: white;
    font: 24px "bellerose";
    z-index:20;
}

.login hr
{
    border: 0px;
    background-color: white;
    height: 1px;
    z-index:20;
}