pop up

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script>
$(document).ready(function(){
    $('.click,.fade').click(function() {
    $('#pop').fadeToggle();
    });
});
</script>
</head>

<style>
.click { cursor:help } /* for question mark cursor on hover */

#pop {
    width:100%;
    height:100%;
    top:0;left:0;
    position:fixed;
    z-index:999;
    background:rgba(255,255,255,.9); /* background of popup. adjust the .9 for the opacity of the background (1 will be solid white, .5 will be semi transparent, etc.)  */
    display:none;
}
.fade {
    top:0;
    left:0;
    position:fixed;
    z-index:1000;
    width:100%;
    height:100%;
}

.popup {
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    position:fixed;
    background:#fff; /* background of popup box */
    padding:10px; /* padding of popup box */
    z-index:10000;
    max-width:300px; /* width of popup */
    border:1px solid #eee; /* popup border */
}

.click {
    top:20px; /* distance from top */
    right:20px; /* distance from right - you can change this to left if you like */
    position:fixed;
}
</style>

<body>
<div class="click">Popup</div>
<div id="pop"> <div class="fade"></div>
    <div class="popup">
        Cupcake ipsum dolor sit amet sweet tiramisu dessert. Chupa chups jelly dessert wafer lemon drops powder. Tootsie roll I love powder chocolate cake gummi bears jujubes gingerbread. Muffin jelly-o jelly-o candy canes pudding.
    </div>
</div>
</body>