5 popup boxes, 1 webpage.

5 popup boxes, 1 webpage.

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="popupContainer" id="popupBox1">
    <div class="popupWrapper">
        <div class="popupBox">
            <h3>Popup Box 1</h3>
            <p>This is popup box 1.</p>
            <p><a href="javascript:void(0)" id="popupBox1Close">Close Popup Box 1</a></p>
        </div>
    </div>
</div>
<div class="popupContainer" id="popupBox2">
    <div class="popupWrapper">
        <div class="popupBox">
            <h3>Popup Box 2</h3>
            <p>This is popup box 2.</p>
            <p><a href="javascript:void(0)" id="popupBox2Close">Close Popup Box 2</a></p>
        </div>
    </div>
</div>
<div class="popupContainer" id="popupBox3">
    <div class="popupWrapper">
        <div class="popupBox">
            <h3>Popup Box 3</h3>
            <p>This is popup box 3.</p>
            <p><a href="javascript:void(0)" id="popupBox3Close">Close Popup Box 3</a></p>
        </div>
    </div>
</div>
<div class="popupContainer" id="popupBox4">
    <div class="popupWrapper">
        <div class="popupBox">
            <h3>Popup Box 4</h3>
            <p>This is popup box 4.</p>
            <p><a href="javascript:void(0)" id="popupBox4Close">Close Popup Box 4</a></p>
        </div>
    </div>
</div>
<div class="popupContainer" id="popupBox5">
    <div class="popupWrapper">
        <div class="popupBox">
            <h3>Popup Box 5</h3>
            <p>This is popup box 5.</p>
            <p><a href="javascript:void(0)" id="popupBox5Close">Close Popup Box 5</a></p>
        </div>
    </div>
</div>

<a href="javascript:void(0)" id="popupBox1Open">Open Popup Box 1</a>
<a href="javascript:void(0)" id="popupBox2Open">Open Popup Box 2</a>
<a href="javascript:void(0)" id="popupBox3Open">Open Popup Box 3</a>
<a href="javascript:void(0)" id="popupBox4Open">Open Popup Box 4</a>
<a href="javascript:void(0)" id="popupBox5Open">Open Popup Box 5</a>

CSS

body{
    padding: 0;
    margin: 0;
    font-family: Karla;
}

.popupContainer{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
}
.popupWrapper{
    width: 600px;
    margin: 60px auto;
}
.popupBox{
    background-color: #FFF;
    border-radius: 4px;
    padding: 20px;
}

@import url(https://fonts.googleapis.com/css?family=Karla:700);

JavaScript

$(document).ready(function(){
    $("#popupBox1,#popupBox2,#popupBox3,#popupBox4,#popupBox5").hide();
    //Popup Box 1
    $("#popupBox1Open").click(function(){
        $("#popupBox1").fadeToggle(150);
    });
    $("#popupBox1Close").click(function(){
        $("#popupBox1").fadeToggle(150);
    });
    //Popup Box 2
    $("#popupBox2Open").click(function(){
        $("#popupBox2").fadeToggle(150);
    });
    $("#popupBox2Close").click(function(){
        $("#popupBox2").fadeToggle(150);
    });
    //Popup Box 3
    $("#popupBox3Open").click(function(){
        $("#popupBox3").fadeToggle(150);
    });
    $("#popupBox3Close").click(function(){
        $("#popupBox3").fadeToggle(150);
    });
    //Popup Box 4
    $("#popupBox4Open").click(function(){
        $("#popupBox4").fadeToggle(150);
    });
    $("#popupBox4Close").click(function(){
        $("#popupBox4").fadeToggle(150);
    });
    //Popup Box 5
    $("#popupBox5Open").click(function(){
        $("#popupBox5").fadeToggle(150);
    });
    $("#popupBox5Close").click(function(){
        $("#popupBox5").fadeToggle(150);
    });
});