Vyskakovací okno po stisku tlačítka

<div class="window">
    <div class="box">
    <div id="zavrit-banner">X</div>
    <p><strong>Vyskakovací okno</strong></p>
    <p>Zavřete kliknutím na černou plochu</p>
    </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
        $("#zavrit-banner").click(function() {
          $( ".window" ).fadeOut("slow");
        });
        $(".window").click(function(e) {
           if( e.target !== this )
           return;
        $( ".window" ).fadeOut("slow");
        });
    </script>
    <style>
    .window{
        position: fixed;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background: rgba(0,0,0,0.6);
        z-index: 500;
        }
    .window .box{
        position:relative;
        width:60%;
        height:auto;
        max-height:600px;
        margin:10% auto;
        background-color: rgba(255,255,255,0.8);
        border-radius:0px;
        box-shadow: 0 0 10px #000000;
        text-align:center;
        padding:20px 40px;
        overflow-y: auto;
        }
    #zavrit-banner{
        position: absolute;
        right: 20px;
        top: 20px;
        width: 30px;
        line-height: 30px;
        font-size: 18px;
        font-family: Verdana, Geneva, sans-serif;
        font-weight: bold;
        text-transform: uppercase;
        text-align: center;
        margin: 0;
        padding: 0;
        cursor: pointer;
        background:#900;
        color: #fff;
        transition:all 0.3s;
        }
    #zavrit-banner:hover{
        background:#162F67;
        color:#FFF;
        transition:all 0.3s;
        }
    p {
        font-size: 20px;
        font-family: Arial, Helvetica, sans-serif;
        }
    @media screen and (max-width: 1024px) {
    .window .box {
        width: 80%;
        max-height: 80%;
        margin: 5% auto;
        }
</style>