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

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()，只是 getting/setting css top 和 left 属性，以及许多其他东西。是时候转向比我更聪明的头脑了。

Answer 1

尝试向模态框添加高度和顶部位置

CSS

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

DEMO

希望对您有所帮助

Answer 2

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

解决方法如下：http://www.bootply.com/AkdX5Cqw9D

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

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

Bootstrap modal moves unexpectedly on 2nd click

jquery

modal-dialog

css-position

offset

twitter-bootstrap-3