Отображение меню рядом с выбором пользователя

Question

У меня есть сценарий, где:

1. Меню / всплывающее окно должны отображаться при выделении текста
2. Меню должно отображать 5 пикселей вправо и 5 пикселей вниз от курсора пользователя

Несмотря на то, что мне удалось достичь 1-го, расположение меню доставляет мне немало хлопот. Я попытался решить ее, используя event.pageX и event.pageY, но это работает только в некоторых случаях

Вот мой код

      $(frameBody).on('mouseup', function (event) {
            var frame = $("#" + activeId).find('.vIframe')[0];
            var selection = $(frame)[0].contentWindow.getSelection();
            var exportMenu = $("#exportMenu") ;
            range = selection.getRangeAt(0);
            var boundary = event.target.getBoundingClientRect();
            var offset = $(frame).offset();
            if (selection.toString().trim().length > 0) {
                $(exportMenu).css('display', 'inline-block');
                $(exportMenu).menu('open');
                $(exportMenu).css({
                    'left': event.pageX + offset.left + $(exportMenu).width()/2 + 5,
                    'top': boundary.top + $(exportMenu).height() + 5
                });
                if ($($(frame)[0].contentWindow).height() < parseInt($(exportMenu).css('top'))) {
                    $(exportMenu).css({
                        'left': event.pageX,
                        'top': event.pageY - 5
                    });
                }
            } else {
                $(exportMenu).css('display', 'none');
            }
            event.stopPropagation();
        });

Буду признателен за любую помощь.

Спасибо.

Answer 1

Вот так я наконец и решил эту проблему.

  $(frameBody).on('mouseup', function (event) {
        var activeId = TabManager.getActiveId();
        var frame = $("#" + activeId).find('.viewerIframe')[0];
        var selection = $(frame)[0].contentWindow.getSelection();
        var exportMenu = $("#" + TabManager.getActiveId()).find("#exportMenu")[0];
        range = selection.getRangeAt(0);
        var zoomfactor = $(frame).attr("zoom");
        selectionNode = $(frame)[0].contentDocument.createElement("highlights-start")
        if (selection.toString().trim().length > 0) {
            var range = selection.getRangeAt(0);
            newRange = document.createRange();
            newRange.setStart(selection.focusNode, range.endOffset);
            newRange.insertNode(selectionNode );
            $(exportMenu).css('display', 'inline-block');
            $(exportMenu).menu('open');
            $(exportMenu).css({
                'top': $(selectionNode).offset().top + $(exportMenu).height() / 2 - 20 + 'px',
                'left': $(selectionNode).offset().left+ 'px'
            });
           else {
            $(exportMenu).css('display', 'none');
        }
        event.stopPropagation();

    });