Question

对不起标题血腥，不确定如何更简洁。

我想做的事情：

我有一个模式，我希望从多个按钮（动态创建）调用并定位在按钮附近。使用jQuery，我获得了点击按钮的.offset()，然后将其分配给模态。

Bootply： http://www.bootply.com/lEUtR2IkeU

JS：

$('.model-open-btn').click(function(){
  $('#pageJumpModal').show().height( '1px' ); //#pageJumpModal is the container that's hidden, .offset has problems with hidden elements, so show it first.
  var offset = $(this).offset();  //Get the button's offset
  $('#pageJumpModal > .modal-dialog').offset({top: offset.top, left: offset.left}); //Set the modal's position.
  $('#pageJumpModal').height( 'auto' ).hide(); //Reset the container's height.
});

问题：

第一次单击任一按钮时，它工作正常（好吧，我相反它显示在上面，但现在已经足够了），但第二次模态显示然后它的顶部位置增加了13px。

我确定我没有考虑过，但我迷失了。我试过.position（），只是获取/设置css top和left属性，以及许多其他东西。是时候转向聪明的头脑了。

Answer 1

尝试添加高度＆amp;模态框的顶部位置

<强> CSS

#pageJumpModal>.modal-dialog {
  position: absolute;
      width: 160px;
      height:160px;
      top:50px !important;
}

DEMO

我希望这会有所帮助

Answer 2

所以问题是position: absolute; .modal-dialog并且它在容器内部。模态应基本上位于<body>的末尾，因此它们的位置将相对于文档而不是其他任何内容。

以下是解决方案：http://www.bootply.com/AkdX5Cqw9D

IMO，对于那些有大量下拉菜单/菜单做类似事情的人来说，这是一个更好的选择。我在调用按钮的data-...属性中设置值或任何我想要更改的模态，然后传递$.click()中的值（也可以使用Bootstrap的模态事件来完成））。

Bootstrap模态在第二次单击时意外移动

2 个答案: