JSFiddle - React, Tailwind, and code Playground

by Katarina Countiss

HTML

<a id="show-panel" href="#">Show Panel</a>

<div id="lightbox-panel">
<section class="block">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="active item">
                <img src="http://lorempixel.com/1024/750" alt="Slide1" />
            </div>
            <div class="item">
                <img src="http://lorempixel.com/1024/750" alt="Slide2" />
            </div>
            <div class="item">
                <img src="http://lorempixel.com/1024/750" alt="Slide3" />
            </div>
        </div>
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
 <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>

    </div>
</section>
    <p align="center">
        <a id="close-panel" href="#">Close this window</a>
    </p>
</div><!-- /lightbox-panel -->

<div id="lightbox"> </div><!-- /lightbox -->

CSS

/* Lightbox background */
#lightbox {
 display:none;
 background:#000000;
 opacity:0.9;
 filter:alpha(opacity=90);
 position:absolute;
 top:0px;
 left:0px;
 min-width:100%;
 min-height:100%;
 z-index:1000;
}
/* Lightbox panel with some content */
#lightbox-panel {
 display:none;
 position:fixed;
 top:100px;
 left:50%;
 margin-left:-200px;
 width:400px;
 background:#AFFFFF;
 padding:10px 15px 10px 15px;
 border:2px solid #CCCCCC;
 z-index:1001;
}

.carousel .item {
    width: 100%; /*slider width*/
    max-height: 600px; /*slider height*/
}
.carousel .item img {
    width: 100%; /*img width*/
}
/*add some makeup*/
.carousel .carousel-control {
    background: none;
    border: none;
    top: 50%;
}
/*full width container*/
@media (max-width: 767px) {
    .block {
        margin-left: -20px;
        margin-right: -20px;
    }
}

JavaScript

$("a#show-panel").click(function(){
    $("#lightbox, #lightbox-panel").fadeIn(300);
 })
 $("a#close-panel").click(function(){
     $("#lightbox, #lightbox-panel").fadeOut(300);
 })