Размещение всплывающего окна Bootstrap рядом с позицией курсора (внутри нажатого элемента) - PullRequest
Новая
       30

Размещение всплывающего окна Bootstrap рядом с позицией курсора (внутри нажатого элемента)

0 голосов
/ 05 октября 2018

У меня есть всплывающее окно начальной загрузки, которое я не могу обнаружить внутри элемента, к которому я его вызываю, рядом с моей мышью.Я много и долго искал документацию popper.js и пытался использовать модификатор 'offset', а также настраивать практически любой другой параметр, который мог придумать, в разных конфигурациях, но, похоже, что бы я ни делал, поповерупрямо хочет, чтобы его позиционировали в одном из четырех направлений строки, и он не будет отображаться внутри элемента, к которому я его вызываю, рядом с моей текущей позицией курсора.

Вот пример, чтобы дать вам представление о том, что я пробовал.Опять же, я пытаюсь расположить всплывающее окно рядом с местом, где происходит мой щелчок мыши, в пределах большого деления. 

$(".a_large_div").click(function(e) {
    var relX = e.pageX - parentOffset.left;
    var relY = e.pageY - parentOffset.top;
    var height = $('.popover').height();
    $(this).popover({
        placement: 'top',
        offset:'-'+(relX + 1000)+'px,-'+(relY)+'px',
        title: 'My Popover', 
        html:true,
        trigger: 'manual',
        modifiers: {
            flip: { enabled: false },
            inner: { order: 700, enabled: true },
            applyStyle: { order: 900, enabled: true, fn: (data, options) => 
                { 
                     data.styles.left = "1000px";
                     console.log(data, options);
                     return data;
                }   
            },
            offset: { order: 0, enabled: true, offset: '-'+(relX + 1000)+'px,-'+(relY)+'px'  },
            },   
            boundary: this,
            content: function() {return $("#my_popover_content").html();},
            delay: 100
    }).on('show.bs.popover', function() {
        // execute some code
    }).on('shown.bs.popover', function() {
        // execute some code
    }).on('inserted.bs.popover', function() {
        Object.assign($('.popover')[0].style,{left:""+relX+"px !important",top:""+relY+"px !important"});
    }).on('hidden.bs.popover', function() {
        // execute some code
    }).on('hide.bs.popover', function() {
        // execute some code
});

$(this).popover('toggle'); 

$('.popover').css('left', (relX) + 'px');
$('.popover').css('top', (relY) + 'px');

Я пробовал все эти разные методы позиционирования, но безрезультатно, кажется, 'Модификатор размещения переопределяет их все, и я не уверен, в какой момент в процессе обновления popper.js я смог бы переопределить его позиционирование.Заранее спасибо за вашу помощь.

...