JSFiddle - React, Tailwind, and code Playground

by henesnarfel

HTML

<div class="overlay" rel="overlay">Link 1</a>
<div class="overlay" rel="overlay2">Link 2</a>


<div class="simple_overlay" id="overlay">

    <!-- large image -->
    <img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg" />

    <!-- image details -->
    <div class="details">
        <h3>The Barcelona Pavilion</h3>

        <h4>Barcelona, Spain</h4>

        <p>The content ...</p>
    </div>
</div>

<!-- second overlay -->
<div class="simple_overlay" id="overlay2">
    ...
</div>

CSS

/* the overlayed element */
.simple_overlay {

    /* must be initially hidden */
    display:none;

    /* place overlay on top of other elements */
    z-index:10000;

    /* styling */
    background-color:#333;

    width:675px;    
    min-height:200px;
    border:1px solid #666;

    /* CSS3 styling for latest browsers */
    -moz-box-shadow:0 0 90px 5px #000;
    -webkit-box-shadow: 0 0 90px #000;  
}

/* close button positioned on upper right corner */
.simple_overlay .close {
    background-image:url(../img/overlay/close.png);
    position:absolute;
    right:-15px;
    top:-15px;
    cursor:pointer;
    height:35px;
    width:35px;
}

/* styling for elements inside overlay */
    .details {
        position:absolute;
        top:15px;
        right:15px;
        font-size:11px;
        color:#fff;
        width:150px;
    }

    .details h3 {
        color:#aba;
        font-size:15px;
        margin:0 0 -10px 0;
    }

JavaScript

$(".overlay").click(function()
 {
     alert($("div[rel]"));
     $("#overlay").show();
 });