JSFiddle - React, Tailwind, and code Playground

by denvut

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
<div id="map" style="width: 100%; height: 100%"></div>
<div style="position: absolute; right:100px; top:20px">
    <img src="http://tinyurl.com/pb9esy2" rel="#test1" alt="" width="100px">
</div>
<div class="simple_overlay" id="test1" style="display:none;background:#2f2f2f;padding:20px;">
    <img src="http://tinyurl.com/pb9esy2" alt="" width="100px" alt="" />
</div>

CSS

html, body, #map {
    height: 100%;
    width: 100%;
}
html, body {
    padding:0px;
    margin:0px;
    background: rgb(169, 219, 128);
    /* Old browsers */
}
/* the overlayed element */
 .simple_overlay {
    display:none;
    /* place overlay on top of other elements */
    z-index:100000;
    /* styling */
    background-color:#333;
    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(http://demo.staticfloat.com/overlay/close.png);
    position:absolute;
    right:-15px;
    top:-15px;
    cursor:pointer;
    height:35px;
    width:35px;
}

JavaScript

$(document).ready(function () {
    $("img[rel]").overlay();
    $('#test1').fadeOut();

    var map = L.map('map').setView([-41.2858, 174.78682], 14);
    mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
    L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; ' + mapLink,
        maxZoom: 18,
    }).addTo(map);
    var marker = L.marker([-41.29042, 174.78219])
        .bindPopup('<img src="http://tinyurl.com/pb9esy2" class="pop" rel="#test1" alt="" width="100px"/>')
        .addTo(map);

    map.on('popupopen', function () {
        $("img[rel]").overlay();
    });
});