JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://andreaslagerkvist.com/aFramework/Modules/Base/jquery.center.js"></script>
<a class="ValuationFunctionality" href='#'>click me to see popup</a>

CSS

.ValuationCalculator
{
    text-decoration: none;
    font-family: Arial, Verdana, Helvetica, Sans-Serif;
    color: #557796;
    background-color: #f1f5f9;
    font-size: 12px !important;
    border-top: solid 5px #c5ced6;
    border-bottom: solid 3px #c5ced6;
    border-left: solid 2px #c5ced6;
    border-right: solid 2px #c5ced6;
    
    width: 300px;
}

.ValuationCalculator div
{
    margin: 3px;
}

.CalculatorTitle
{
    text-align: right;
    padding-bottom: 3px;    
    padding-top: 1px;    
    height: 10px;
}

.CalculatorTitle span
{
    float: left;
    font-size: 12px;
    font-weight:bold;
    font-family: Arial, Verdana, Helvetica, Sans-Serif;
    margin-bottom: 3px;
    color: #557796;
}

.CalculatorTitle a:link, .CalculatorTitle a:hover, .CalculatorTitle a:visited
{
    padding: 1px;
    background-color: #FFF;
    margin-bottom: 3px;
    border: solid 1px #c5ced6;
    font-size: 12px !important;
    float:right;
    color: red;
    font-weight:bold !important;
    text-decoration: none !important;
}

JavaScript

$(document).ready(function() {

    $("body").keydown(function(e) {
        if (e.keyCode == 27) {
            RemoveCalculator();
        }
    });

    $('.CalculatorTitle a').live('click', function() {
        RemoveCalculator();

        return false;
    });

    function RemoveCalculator() {
        $('#divValuationCalculator').fadeOut(500, function() {
            $('#divValuationCalculator').remove();
        });
    }

    $('.ValuationFunctionality').click(function() {
        var parentRow = $(this).parents('tr');

        var fundName = parentRow.children('td:first').attr('FundName');
        var bidPrice = parentRow.children('.BidPrice').text();
        var priceDate = $('input[id$=txtHistoricalPricesDate]').val();

        var container = $("<div id='divValuationCalculator' />").attr("class", "ValuationCalculator");

        var title = $("<div class='CalculatorTitle'/>")
            .append("<span>Value Calculator</span>")
            .append("<a href='#'>X</a>");

        var calculator = $("<div/>")
            .append($('<table />')
                .append($('<tr />')
                    .append($('<td/>').text("Unit Price"))
                    .append($('<td/>').text("Number of Units"))
                    .append($('<td/>').text("Value"))
                )
                .append($('<tr />')
                    .append($('<td/>').text(bidPrice))
                    .append($('<td/>').append($('<input id="txtValuation" type="text" />')))
                    .append($('<td/>').text("123.45")
                )
            )
        );


        var legalText = $('<div />').text("Please note, this calculation is for illustrative purposes.");

        var popup = container
            .append(title)
            .append(calculator)
            .append(legalText)
            .appendTo('body');

        if ($.browser.msie && $.browser.version < 7) {
            popup.centerIE6();
        }
        else {
            popup.center();
        }
       ...