jQuery(function($) {

    var $popup = $('#dvUsers');

    var $infoField = $popup.find('.dynamicInfo');

​

    function showPopup(event) {

​

        // set content

        $infoField.text('clicked link: ' + $(this).text());

​

        // reset position

        $popup.show().css({top: 0, left: 0});

​

        // calculate new position

        var calculator = new $.PositionCalculator({

            item: $popup,

            itemAt: "top left",

            target: this,

            targetAt: "bottom left",

            flip: "both"

        });

        var posResult = calculator.calculate();

​

        // set new position

        $popup.css({

            top: posResult.moveBy.y + "px",

            left: posResult.moveBy.x + "px"

        });

​

        // window resize handler

        $(window).off('resize.dvUsers');

        $(window).on('resize.dvUsers', function(event) {

            $popup.css({top: 0, left: 0});

            var newResult = calculator.resize().calculate();

            $popup.css({

                top: newResult.moveBy.y + "px",

                left: newResult.moveBy.x + "px"

            });

        });

    }

​

    // add click handler for show and hide

    $('.lnkUsers').on('click', showPopup);

    $popup.on('click', function() {

        $popup.hide();

        $(window).off('resize.dvUsers');

    });

​

​

});