我已经在一个小项目中实现了popper.js,但是我有一个小项目,带有指向参考元素的箭头,因为当您从底部到顶部更改弹出窗口的位置时,箭头没有改变,我附上我的初始化代码和一些显示问题的图像,希望您能为我提供帮助,谢谢。
<div id="${num_transaccion}" class="d-none popup">
<div class="arrow"></div>
<div class="container-body">
<table class="table table-popover">
<thead>
<tr>
<th>#Folio Programado</th>
<th>#Grupo</th>
</tr>
</thead>
<tbody>
<tr>
<td>#Folio Programado</td>
<td>#Grupo</td>
</tr>
</tbody>
</table>
</div>
</div>
我正在使用datatables jquery插件将表包装到具有水平滚动的div中, 这是我的popper.js代码初始化:
var num_trans = $(this).data("num-transaction");
let reference = $(this);
let popup = $(num_trans);
new Popper(reference, popup, {
placement: "top",
modifiers: {
keepTogether: { enabled: false },
arrow: {
enabled: true,
element: '.arrow'
}
}
});
我的弹出式CSS代码:
.arrow {
width: 12px;
height: 12px;
display: block;
position: absolute;
}
.popup[x-placement="bottom"] .arrow {
margin-top: -10px;
border-bottom: 10px solid #D0D3D8;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
.popup[x-placement="top"] .arrow {
margin-top: -10px; /* This must be change I think */
border-top: 10px solid #D0D3D8;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
.popup {
max-width: 80%;
width: 100%;
padding: 10px;
}