[英]How to change Bootstrap popover position dynamically?
有什么方法可以根据窗口宽度更改Bootstraps Popover的位置吗? 我正在使用它来显示一些额外的表单项,并且需要显示是否在左侧站点上,但需要在顶部移动设备上显示。 因此,基本上,当屏幕变小时-我需要更改位置。
jQuery('#monthly-expenses').popover({
content: jQuery('#monthly-expense-datails'),
placement() {
let placement = 'left';
if (jQuery(window).width() <= 992) {
placement = 'top';
}
return placement;
},
html: true,
trigger: 'manual'
})
更改窗口大小时,可以销毁并重新创建弹出窗口:
var placement;
jQuery(window).on('resize',function(){
if (jQuery(window).width() <= 992 && placement == 'left') {//when the width is right and we did't change placement
placement = 'top';
jQuery('#monthly-expenses').popover('dispose');//destroy the
createPopover(placement);//create it with the new placement
} else if (jQuery(window).width() > 992 && placement == 'top')
placement = 'left';
jQuery('#monthly-expenses').popover('dispose');//destroy the popover
createPopover(placement);//create it with the new placement
}
});
function createPopover(placement) {
jQuery('#monthly-expenses').popover({
content: jQuery('#monthly-expense-datails'),
placement:placement,
html: true,
trigger: 'manual'
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.