Lightbox Overlay

by Patrick Hund

HTML

<div id="container">
    <div id="popup" class="box">
         <h1>I told you not to click!</h1>

        <p class="text-right">
            <button id="close" class="btn btn-success"> 
                <span class="glyphicon glyphicon-remove"></span>
                Sorry...
            </button>
        </p>
    </div>
    <div id="overlay"></div>
</div>

<h1>I want to be overlayed</h1>

<p>Bacon ipsum dolor sit amet pastrami pancetta andouille landjaeger turducken leberkas chicken shank chuck tri-tip ham. Kevin andouille cow, beef ribs shank swine pork hamburger strip steak capicola turkey short loin. Prosciutto shank short loin, tri-tip shankle pork loin beef ribs turducken porchetta. Doner porchetta meatball, jowl pork short ribs biltong short loin ham hock boudin capicola kielbasa pastrami. Sirloin frankfurter leberkas fatback. Flank tail venison sirloin bresaola jerky.</p>

<p>Prosciutto tenderloin bresaola spare ribs. Shoulder rump ball tip ham pork belly kevin bacon prosciutto spare ribs bresaola tenderloin. Cow turkey kevin, pork belly beef ribs meatloaf pork chop swine jowl pig corned beef bresaola. Porchetta spare ribs shoulder corned beef ham hock tri-tip bresaola andouille drumstick beef strip steak tongue chicken pork loin pancetta.</p>

<p>Capicola kielbasa leberkas brisket. Landjaeger hamburger doner ham shankle kevin flank beef boudin ribeye beef ribs corned beef short loin strip steak. Biltong ground round strip steak ham hock beef ribs, pork loin short loin tail. Tenderloin landjaeger pork chop boudin porchetta prosciutto beef short loin ham hock t-bone pork belly short ribs salami beef ribs bresaola.</p>

<p>Beef brisket spare ribs ground round prosciutto short ribs bresaola, pork belly tail. Shoulder beef ribs ball tip andouille, rump capicola brisket beef corned beef ribeye spare ribs cow venison hamburger doner. Fatback jerky flank beef kevin. Shoulder pastrami jowl biltong.</p>

<p>Prosciutto tenderloin bresaola spare ribs. Shoulder rump...

CSS

#popup {
    z-index: 3;
    left: 25%;
    right: 25%;
    top: 25%;
    right: 25%;
    display: none;
}
#overlay {
    z-index: 2;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(100, 100, 100, 0.5);
    display: none;
}
#other-popup {
    z-index: 1;
    top: 100px;
    left: 100px;
}
.box {
    position: absolute;
    background-color: #eee;
    padding: 10px 20px;
    border: 1px solid black;
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(100, 100, 100, 0.5);
}
#other-container {
    position: absolute;
    top: 0px;
    left: 0px;
}

JavaScript

$("#dont-click").on("click", function () {
    $("#popup, #overlay").show();
});

$("#close").on("click", function () {
    $("#popup, #overlay").hide();
});