JSFiddle - React, Tailwind, and code Playground

by lupos

HTML

<div id="content">
    <table>
        <tr>
            <td>word</td>
            <td>word</td>
            <td>word</td>
            <td>word</td>
        </tr>
        <tr>
            <td>word</td>
            <td>word</td>
            <td>word</td>
            <td>word</td>
        </tr>
        <tr>
            <td>word</td>
            <td>word</td>
            <td>word</td>
            <td>word</td>
        </tr>
    </table>
    <div id="popup">I'm a pop up!</div>
</div>

CSS

#content{
    position:relative;
    display:block;
    width:500px;
    height:600px;
    border: 1px solid gray;
    clear:right;
}
table{
    width:100%;
    height:100%;
}
tr{
    width:100%;
}
td{
    border: 1px solid red;
    width:25%;
    text-align:center;
}

#popup{
    display:block;
    background-color:gray;
}
.popupFloat{
    positon:absolute;
}

JavaScript

// calendar pop up menu with dynamic placment

(function($){
    $.fn.dynamicModal = function(options){
        alert($(this).attr('id'));
        var defaults = {};
        var options = $.extend(defaults, options);
        
        $("body").delegate("p", "click", function(){
          $(this).after("<p>Another paragraph!</p>");
        });
                
        $(this).delegate("td", "click", function(){
            com = ", ";
            PopUp = $('#popup');
            PageWidth = $("body").width();
            PageHeight = $("body").height();
            Con = $('#content');
            ConOffset = Con.offset();
            ConXPos = ConOffset.left;
            ConYPos = ConOffset.top;
            XPos = this.pageX - ConXPos;
            YPos = this.pageY - ConYPos;
            ConWidth = Con.outerWidth();
            ConHeight = Con.outerHeight();
            Day = $(this);
            DayWidth = Day.outerWidth();
            DayHeight = Day.outerHeight();
            AllVars = XPos + com + YPos + com + ConWidth + com + ConHeight + com + DayWidth + com + DayHeight;
            PopUp.html(AllVars);
            //PopUp.css({top : YPos, left : XPos})'
            PopUp.css("position", 'absolute');
            if (XPos < (ConWidth / 2)) {//LEFT
                PopUp.css("left", XPos + 5);
            } else {//RIGHT
                PopUp.css("left", XPos - PopUp.width() - 5);
            }
            if (YPos < (ConHeight / 2)) {//TOP
                PopUp.css("top", YPos + 5);
            } else {//BOTTOM
                PopUp.css("top", YPos - PopUp.height() - 5);
            }
        });
    }
    })( jQuery );
$(document).ready(function() {
        $('#content').dynamicModal();
});