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

[Anonymous]

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

.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;
}







open Chart





Modal title




Contain
Type
Subcategory
Socket
Type






4
01
2011
i7

• TypeProcessors
  
  Type nameProcessors
• Type code4

[*]SubcategoryGPU line

• Subcategory nameGPU line
• Subcategory code01

[*]SocketSocket type

• Socket serieLGA
• Socket type2011

[*]PC CPUServer CPU

• Brand nameIntel
• Typei7

Close















// 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);
}



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