Popup Menu, fadeIn and fadeOut

Popup Menu, fadeIn and fadeOut

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="popup-container" id="popup1">
    <div class="popup-wrapper">
        <div class="popup-head">Popup Box 1</div>
        <div class="popup-content">
            <p>This is a popup box, add your content here.</p>
            <p><a href="javascript:void(0)" id="popup1close">Close</a></p>
        </div>
    </div>
</div>

<a href="javascript:void(0)" id="popup1open">Open Popup 1</a>

CSS

body{ padding: 0; margin: 0; font-family: Arial; }
.popup-container{ position: fixed; width: 100%; height: 120%; background-color: rgba(0,0,0,0.9); }
.popup-wrapper{ width: 500px; margin: 50px auto; }
.popup-head{ background-color: #AAA; padding: 10px; }
.popup-content{ background-color: #FFF; padding: 15px; }

JavaScript

$(document).ready(function(){
$(".popup-container").click(function(e){
e.stopImmediatePropagation();
$("#popup1").fadeOut();
});
    $(".popup-container").hide();
    $("#popup1open").click(function(){
        $("#popup1").fadeIn();
    });
    $("#popup1close").click(function(){
        $("#popup1").fadeOut();
    });
});