JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<div id="boxes">
     <div id="dialog" class="window">
        <a href="#" class="close">Close</a>
         
       <img id="Promo-image" src="http://www.solblot.se/solblot.jpg" usemap="#Promo" border="0" width="700" height="800" alt="" />
<map id="Promo" name="Promo">
<area shape="rect" coords="190,62,311,81" href="http://store.tesco-germany.com/cgi-bin/shopper.cgi?preadd=action&key=CDXSHEIM011" alt="Buy CD" title="Buy CD"    />
<area shape="rect" coords="348,62,498,81" href="http://store.tesco-germany.com/cgi-bin/shopper.cgi?preadd=action&key=VNYSHEIM011" alt="Buy Vinyl" title="Buy Vinyl"    />
<area shape="rect" coords="536,455,653,474" href="http://www.nonpop.de/nonpop/index.php?mkey=SOLBLOT-Foee-Mig-Finns-Ingen-Vaeg-Frn&type=review&area=1&p=articles&id=2136" alt="NONPOP Review" title="NONPOP Review"    />
<area shape="rect" coords="473,543,614,559" href="mailto: [email protected]" alt="Contact Tesco Organisation Germany" title="Contact Tesco Organisation Germany"    />
<area shape="rect" coords="451,557,538,572" href="mailto: [email protected]" alt="Contact Solblot" title="Contact Solblot"    />
<area shape="rect" coords="156,557,270,573" href="http://www.facebook.com/Solblot" alt="Solblot on Facebook" title="Solblot on Facebook"    />
<area shape="rect" coords="86,556,136,572" href="http://www.solblot.se" alt="Official Solblot web page" title="Official Solblot web page"    />
<area shape="rect" coords="85,680,215,696" href="http://solvannen.spreadshirt.se" alt="Official Solblot Merchandise" title="Official Solblot Merchandise"    />
<area shape="rect" coords="397,682,542,698" href="http://www.solblot.se/presskit.zip" alt="Download Solblot Press kit" title="Download Solblot Press kit"    />
<area shape="rect" coords="139,765,215,784" href="http://www.facebook.com/Solblot" alt="Solblot on Facebook" title="Solblot on Facebook"    />
<area shape="rect" coords="225,765,306,784" href="http://itunes.apple.com/se/artist/solblot/id330207210" alt="Solblot on...

CSS

#mask {
  position:absolute;
  z-index:6000;
  background-color:#000;
  display:none;
}
   
#boxes .window {
  position:fixed;
  display:none;
  z-index:7000;
  background-color: #000;
}
 
#boxes #dialog {
  width:700px;
  height:800px;
}

#boxes #dialog img {
  position: fixed;
  top: 0;
  z-index:8000;
}

a.close {
    display: block;
    position: fixed;
    top: 0;
    padding: 5px;
    background-color: #000;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 2px;
    color: #fff;
    text-decoration: none;
    font-style: normal;
    z-index:9000;
}

JavaScript

function launchWindow(id) {

    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    //Set heigth and width to mask to fill up the whole screen
    $('#mask').css({
        'width': maskWidth,
        'height': maskHeight
    });

    //transition effect        
    $('#mask').fadeIn(1000);
    $('#mask').fadeTo("slow", 0.8);

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    //Set the popup window to center
    $(id).css('top', winH / 2 - $(id).height());
    $(id).css('left', winW / 2 - $(id).width() / 2);

    //transition effect
    $(id).fadeIn(2000);


}
$(document).ready(function() {
    //Put in the DIV id you want to display
    launchWindow('#dialog');

    //select all the a tag with name equal to modal
    $('a[name=modal]').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        //Get the A tag
        var id = $(this).attr('href');

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({
            'width': maskWidth,
            'height': maskHeight
        });

        //transition effect     
        $('#mask').fadeIn(1000);
        $('#mask').fadeTo("slow", 0.8);

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top', winH / 2 - $(id).height() / 2);
        $(id).css('left', winW / 2 - $(id).width() / 2);

        //transition effect
        $(id).fadeIn(2000);

    });

    //if close button is clicked
    $('.window .close').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask, .window').hide();
    });

    //if mask is clicked
   ...