JSFiddle - React, Tailwind, and code Playground

by cornelas

HTML

<div class="full">
<div class="pdf_grey">
<span class="deselect top_inf"><h3>Close<h3></span><br>
<iframe id="manual" style="border:1px solid #666CCC" title=" Manual" src="Images/pdf/UserMaual.pdf" frameborder="1" scrolling="auto" height="600" width="850" ></iframe>
</div>
</div>
<div id="wrapper">
<img src="downloads/thumbs/lg_rsstacked_4c_01.jpg" />
<h3>Site Manual</h3><span class="select">Preview</span><span class="deselect">Minimize</span> | <a href="Images/pdf/Site_Help_Manual_2012.zip">Download</a>
<div class="topdiv">

</div>    
</div>

CSS

body {
    padding:0px;
    margin: 0px;
}
.full {
    background: #000;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 5;
    display: none;
}
.red {
    background: red;
    width: 10%;
    height: 25%;
}
    .pdf_grey {
    position: absolute;
    left: 25%;
    top: 15%;
    display: none;
    padding: 25px;
    background: #333;

    }
    .deselect {
        display: none;
        cursor: pointer;
    }
        .select {
        cursor: pointer;
        color: #666;
        
    }
    .select:hover {
        color: red;
        
    }

JavaScript

$(document).ready(function() {

    $('.full').css({'opacity' : .7});

    $('.select').click(function () {
        $('.pdf_grey').fadeIn('slow');
        $('.full').fadeIn('slow');
        $('.select').hide();
        $('.deselect').show();
    });
    $('.deselect').click(function() {
        $('.pdf_grey').fadeOut('slow');
        $('.full').fadeOut('slow');
        $('.select').show();
        $('.deselect').hide();
    });

    });
    $(document).mouseup(function (e)
{
    var container = $(".pdf_grey");
    var bkg = $(".full");
    var deselect = $(".deselect");
    var select = $(".select");

    if (container.has(e.target).length === 0)
    {
        container.hide();
        deselect.hide();
        select.show();
        bkg.hide();
    }
});