adding-popup-to-dynamic-tables

by dekkard

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<div class="popup-position" id="popup-box">
    <div id="popup-wrapper">
        <p style="text-align: right;">
            <a href="javascript:void(0);">X</a>
        </p>
        <div id="popup-container"></div>
    </div>
</div>

JavaScript

function toggle_visibility(id) {
    $(id).toggle();
}

jQuery(document).ready(function () {
    
    $('#popup-box a').on('click', function(){
        toggle_visibility('#popup-box .popup-container');
    });

    //var dmJSON = "clues.json";
    var dmJSON = "https://api.myjson.com/bins/ytmd";
    $.getJSON(dmJSON, function (data) {
        $.each(data.details, function (i, f) {
            var myid = 'mypop' + String(i + 1);
            var popup = "<popup id='" + myid +
                "' class='mystyles1'><tr>" + "<p>" + f.Myclue +
                "</p></tr>" + "<tr><p>" + f.Description +
                "</p></tr>" + "<tr><p>" + f.Updates +
                "</p></tr>" + "<tr><p> " + f.Users +
                "</p></tr>" +
                "&nbsp;&nbsp;&nbsp;</popup>";
            $("#popup-container").append(popup);
        });
    });

});