我已经设置了一个弹出窗口，当你点击我日历中的一天时弹出窗口(使用 jQuery FullCalendar)，它的位置很好，直到我将 select2 添加到我的表单元素中。
问题是它应该在日期 30 出现，但它的定位非常糟糕。
这是我的弹出窗口代码(显示弹出窗口时初始化 select2)和此后的 jsFiddle:
cell.popover(
{
html: true,
title: '<div id="popover-head">Aggiungi Appuntamento</div>',
content: ['<div id="popover-content">',
'<div data-type="alert" class="alert alert-info hide" style="margin-bottom: 10px;">',
'<strong>Usati: </strong> <span data-type="remaining"></span>/<span data-type="total"></span></div>',
'<form data-form="shtoTakim" action="utente/shtoTakim" method="post" style="margin-bottom: 0;">',
'<div class="controls controls-row">',
'<div class="control-group" style="margin-bottom: 0;">',
'<div class="controls">',
'<select name="type" class="span2">',
'<option value>Seleziona tipo</option>',
'</select>',
'</div>',
'</div>',
'<div class="control-group" style="margin-bottom: 0;">',
'<div class="controls pull-right">',
'<select name="timezone" class="span1">',
'<option value="0">AM</option>',
'<option value="1">PM</option>',
'</select>',
'</div>',
'</div>',
'</div>',
'<div class="controls controls-row">',
'<div class="control-group" style="margin-bottom: 0;">',
'<div class="controls">',
'<select name="province" class="span3">',
'<option value>Seleziona provincia</option>',
'</select>',
'</div>',
'</div>',
'</div>',
'<div class="controls controls-row">',
'<div class="control-group" style="margin-bottom: 0;">',
'<div class="controls controls-row">',
'<select name="comune" class="span2" data-placeholder="Comune.." multiple disabled>',
'</select>',
'<input name="cap" class="span1" type="text" value="" placeholder="CAP" />',
'</div>',
'</div>',
'</div>',
'<div class="controls controls-row">',
'<span class="label label-important pull-left hide" data-type="warn" style="margin-top: 6px;">Daily limit exceeded</span> <div data-type="spinner" class="pull-right"><button type="submit" class="btn btn-primary input-small">Aggiungi</button></div>',
'</div>',
'</form>',
'</div>',
'<span data-type="date" class="hide">' + cellDate.getFullYear() + '/' + (cellDate.getMonth() + 1) + '/' + cellDate.getDate() + '</span>'].join(''),
placement: function(tip, element) {
var $element, above, actualHeight, actualWidth, below, boundBottom, boundLeft, boundRight, boundTop, elementAbove, elementBelow, elementLeft, elementRight, isWithinBounds, left, pos, right;
isWithinBounds = function(elementPosition) {
return boundTop < elementPosition.top && boundLeft < elementPosition.left && boundRight > (elementPosition.left + actualWidth) && boundBottom > (elementPosition.top + actualHeight);
};
$element = $(element);
pos = $.extend({}, $element.offset(), {
width: element.offsetWidth,
height: element.offsetHeight
});
actualWidth = 410;
actualHeight = 200;
boundTop = $(document).scrollTop();
boundLeft = $(document).scrollLeft();
boundRight = boundLeft + $(document).width();
boundBottom = boundTop + $(document).height();
elementAbove = {
top: pos.top - actualHeight,
left: pos.left + pos.width / 2 - actualWidth / 2
};
elementBelow = {
top: pos.top + pos.height,
left: pos.left + pos.width / 2 - actualWidth / 2
};
elementLeft = {
top: pos.top + pos.height / 2 - actualHeight / 2,
left: pos.left - actualWidth
};
elementRight = {
top: pos.top + pos.height / 2 - actualHeight / 2,
left: pos.left + pos.width
};
elementBottomRight = {
top: pos.top + pos.height,
left: pos.left + pos.width / 2 - (actualWidth * 0.8)
};
elementBottomLeft = {
top: pos.top + pos.height,
left: pos.left + pos.width / 2 - (actualWidth * 0.2)
};
elementTopRight = {
top: pos.top - actualHeight,
left: pos.left + pos.width / 2 - (actualWidth * 0.8)
};
elementTopLeft = {
top: pos.top - actualHeight,
left: pos.left + pos.width / 2 - (actualWidth * 0.2)
};
above = isWithinBounds(elementAbove);
below = isWithinBounds(elementBelow);
left = isWithinBounds(elementLeft);
right = isWithinBounds(elementRight);
bottomRight = isWithinBounds(elementBottomRight);
bottomLeft = isWithinBounds(elementBottomLeft);
topRight = isWithinBounds(elementTopRight);
topLeft = isWithinBounds(elementTopLeft);
if (above) {
return "top";
} else if (topRight) {
return "top-right";
} else if (topLeft) {
return "top-left";
}
else if (below) {
return "bottom";
} else if (bottomRight) {
return "bottom-right";
} else if (bottomLeft) {
return "bottom-left";
}
else if(left) {
return "left";
} else if(right) {
return "right";
} else {
// default
return "bottom";
}
},
animation: false,
trigger: 'manual',
container: 'body'
/*callback: function(){
$('.select2').select2();
}*/
});
我重新创建了一个带有按钮的 jsFiddle 供您查看，尝试注释掉 select2 初始化，看看没有它它也能正常工作。我也尝试过 selectize.js，但它仍然出现同样的问题。
这是 jsFiddle:http://jsfiddle.net/qHQg4/ (调整按钮边距，使弹出窗口位于顶部)。
最佳答案
它改变了位置，因为位置是基于弹出窗口的维度，而 select2 改变了它。
正确的方法是设置 select2 ( check their documentation) 的样式，然后更改定位。
如果你想快速修复定位，你可以给 popover 它曾经拥有的维度:
我只将弹出窗口的尺寸添加到 css:
.popover{width: 249px; height: 304px;}
关于javascript - 使用 select2 时 Bootstrap popover 放置错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19600087/