JSFiddle - React, Tailwind, and code Playground

by zidski

HTML

<div style="position:relative">
      <p><a class='activate_modal' name='modal_window' href='#'>Share</a></p>
    <div id='modal_window' class='modal_window'>
       
      <div class="header">
    <a href="#" class="close_modal">Close</a>
        </div>
        
    <ul class="list">
       <li class="delicious"><a href="http://www.delicious.com/save?v=5&noui=&jump=close&url=">Delicious</a></li>
       <li class="digg"><a href="http://digg.com/submit?url=">Digg</a></li>
       <li class="facebook"><a href="http://www.facebook.com/sharer.php?u=the_link&t=the_title">Facebook</a></li>
       <li class="reddit"><a href="http://www.reddit.com/submit?url=">Reddit</a></li>
       <li class="stumbleupon"><a href="http://www.stumbleupon.com/submit?url=">StumbleUpon</a></li>
       <li class="twitter"><a href="http://twitter.com/intent/tweet?text=">Twitter</a></li>
    </ul>
    
    </div>
   </div>

CSS

.modal_window{
        position:absolute;
        display:none;
        color:white;
        padding:8px;
        height:auto;
        background: #848d98;
        color:black;
        z-index:100;
        top:25px;
        left:0px;
        width:200px;
    }
.close_modal {
    background-position:-11px -255px;
    background-image:url(http://static.bbc.co.uk/modules/sharetools/v1/img/sprite.png);
    text-indent:-5000px;
    width:10px;
    height:10px;
    position:relative;
    display:block;
}

ul.list {
    list-style:none;
    padding:0px;
    margin:0px;
}
.list li {
    margin:8px;
    height:24px;
}
.list li a {
       color:#fff;
    text-decoration:none;
    padding:2px;
    text-indent: 30px;
    background-image:url(http://static.bbc.co.uk/modules/sharetools/v1/img/sprite.png);
    height:21px;
    display:block;
}

.activate_modal {
    background-position:-68px -186px;
     background-image:url(http://static.bbc.co.uk/modules/sharetools/v1/img/sprite.png);
    padding:0px 5px 0px 19px;
    background-color:#E8E8E8;
    color:#424242;
    text-decoration:none;
    }
    
.activate_modal:hover,
.activate_modal.current{
    background-position:-68px -158px;
    background-color:#69C023;
    color:#fff!important;
}
.list li a:hover {
    text-decoration:underline;}

.list li.delicious a {background-position:-210px -293px}
.list li.delicious a:hover {background-position:0px -293px}

.list li.digg a {background-position:-210px -318px}
.list li.digg a:hover {background-position:0px -318px}

.list li.facebook a {background-position:-210px -343px}
.list li.facebook a:hover {background-position:0px -343px}

.list li.reddit a {background-position:-210px -368px}
.list li.reddit a:hover {background-position:0px -368px}

.list li.stumbleupon a {background-position:-210px -393px}
.list li.stumbleupon a:hover {background-position:0px -393px}

.list li.twitter a {background-position:-210px -418px}
.list li.twitter a:hover {background-position:0px -418px}

JavaScript

$(document).ready(function(){
    
        $('ul').each(function() {
           $(this).find('li').click(function() {
               var listItem = this;
              close_modal();
              $('.activate_modal').removeClass('current');
           });
        });
        
   
        $('.activate_modal').click(function(e){
            e.preventDefault();
            $(this).addClass('current');
           //get the id of the modal window stored in the name of the activating element       
           var modal_id = $(this).attr('name');
            if(!$('#' + modal_id).is(":visible")){
             //use the function to show it
              show_modal(modal_id);
            }
            else{
                close_modal();
                $('.activate_modal').removeClass('current');
            }
        });


        $('.close_modal').click(function(e){
            e.preventDefault();
            $('.activate_modal').removeClass('current');
            //use the function to close it
            close_modal();
        });
    });
    
    //THE FUNCTIONS
    function close_modal(){
        //hide the mask
        $('#mask').fadeOut(500);
        //hide modal window(s)
        $('.modal_window').fadeOut(500);
    }
    function show_modal(modal_id){
    
        //set display to block and opacity to 0 so we can use fadeTo
        $('#mask').css({ 'display' : 'block', opacity : 0});
        //fade in the mask to opacity 0.8
        $('#mask').fadeTo(500,0.8);
         //show the modal window
        $('#'+modal_id).fadeIn(500);
    }