Как правильно использовать библиотеку Leader-line.js с прокручиваемым модальным окном? ⇐ Jquery

[Anonymous]

У меня проблема в коде. Я использую библиотеки Leader-Line.js и фреймворк Bootstrap 5, а также модальное окно с возможностью прокрутки. Модальное окно отображается перед содержимым страницы, но линии выноски (в то время как прикрепленные элементы находятся за модальным окном) появляются перед модальным окном. Как избежать этой проблемы при прокрутке?
Issue_image

Код: Выделить всё

// Draw a line between two elements
function drawLine(e1, e2) {
let line = new LeaderLine(
e1,
e2
);
line.setOptions({
startSocket: 'right',
endSocket: 'bottom'
});
line.color = '#999';
line.startPlug = 'behind';
line.endPlug = 'behind';
line.path = 'grid';
line.size = 1;
line.position();

return line;
}

let lines = [];

const myModalEl = document.getElementById('ChartFlowModal');
myModalEl.addEventListener('shown.bs.modal', event => {
lines.push(drawLine(document.getElementById('role-text-1.1'), document.getElementById('role-text-1.2')));
lines.push(drawLine(document.getElementById('role-text-2.1'), document.getElementById('role-text-2.2')));
lines.push(drawLine(document.getElementById('role-text-3.1'), document.getElementById('role-text-3.2')));
lines.push(drawLine(document.getElementById('role-text-4.1'), document.getElementById('role-text-4.2')));

// Start the polling loop
repositionLines();
});

myModalEl.addEventListener('hide.bs.modal', event => {
lines.forEach(line => line.remove());
lines = [];
});

const bottomRight = new PlainDraggable(handle2, {
onMove: function() {
wrapperPosition();
repositionLines();
},
onMoveStart: function() {
lines.forEach(line => line.dash = {
animation: true
});
},
onDragEnd: function() {
lines.forEach(line => line.dash = false);
},
autoScroll: {
target: elmFrame,
sensitivity: [16, 8, 0]
}
});

function repositionLines() {
lines.forEach(line => line.position());
// Use requestAnimationFrame to continuously reposition lines
requestAnimationFrame(repositionLines);
}

Код: Выделить всё

.modal-header {
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: #0d6efd;
color: #fff;
padding-top: 0rem;
position: relative;
}

.modal-header .modal-top-close {
font-size: 14px;
margin: 10px;
margin-right: -5px;
}

.modal-title {
font-size: 21px;
}

.modal .modal-content {
height: 50%;
min-height: 400px;
}

.modal-footer {
background-color: #eaeaea;
}

.sku-structure {
margin-left: 60px;
}

.sku-structure ul {
margin-left: 10px;
padding-left: 10px;
border-left: 1px dashed #ddd;
}

.sku-structure li {
list-style: none;
font-size: 15px;
font-weight: 300;
line-height: 25px;
}

.leader-line {
z-index: 9000;
}

Код: Выделить всё

[url=#]open Chart
[/url]




Modal title




Contain
Type
Subcategory
Socket
Type






4
01
2011
i7



[list]
[*]
[b]Type[/b]Processors


Type nameProcessors

[*]
Type code4

[/list]

[*]
[b]Subcategory[/b]GPU line
[list]

Subcategory nameGPU line

[*]
Subcategory code01

[/list]


[*]
[b]Socket[/b]Socket type
[list]

Socket serieLGA

[*]Socket type
2011

[/list]

[*]
[b]PC CPU[/b]Server CPU
[list]

Brand nameIntel

[*]
Typei7

[/list]






Close

Подробнее здесь: https://stackoverflow.com/questions/793 ... dal-window