如何解决当视口中水平和垂直没有空间时,如何自动定位弹出箭头?
我正在尝试显示一个带有弹出箭头的弹出窗口,无论我们在屏幕上的任何位置移动,弹出窗口和箭头都应该正确显示。
如果视口弹出窗口有足够的宽度和高度,弹出窗口工作正常。
失败案例 - 如果没有空格,则 popper 箭头无法正常工作并显示随机位置。
预期结果 - 如果视口popper中没有垂直或水平空间,应自动调整位置并显示在所选DOM上方。
弹出维度- 宽度 - 440 像素,高度 = 400 像素 popper 位置设置为左侧。
代码 HTML。
<div class="popup id='popup>
<div id="arrow" data-popper-arrow></div>
</div>
CSS
.popup{
width:440px;
height:400px;
}
#arrow{
position: absolute;
width: 8px;
height: 8px;
z-index: -1;
transform: rotate(45deg);
background:white;
}
#popup[data-popper-placement^='top'] > #arrow{
bottom: -4px;
}
#popup[data-popper-placement^='bottom'] > #arrow{
top: -4px;
}
#popup[data-popper-placement^='left'] > #arrow{
right: -4px;
}
#popup[data-popper-placement^='right'] > #arrow{
left: -4px;
}
波普尔代码
createPopper(elementSel,popup,{
placement: position,modifiers: [
{
name: 'offset',options: {
offset: [0,12]
}
}
]
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。