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

【问题标题】：Bootstrap modal moves unexpectedly on 2nd clickBootstrap 模态在第二次点击时意外移动
【发布时间】：2015-11-22 05:04:18
【问题描述】：

对不起，标题很血腥，不知道如何更简洁。

我想做的事：

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

引导： 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 顶部和左侧属性，以及许多其他的东西。是时候转向比我更聪明的头脑了。

【问题讨论】：

标签： jquery twitter-bootstrap-3 modal-dialog css-position offset

【解决方案1】：

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

CSS

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

DEMO

希望对你有帮助

【讨论】：

我想通了。也许我的问题不够清楚，但我希望模式出现在触发它的按钮附近。无论选择什么按钮，您的答案都会让它出现在相同的高度。感谢您尝试提供帮助！

【解决方案2】：

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

这里是解决方案：http://www.bootply.com/AkdX5Cqw9D

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

【讨论】：