Bootstrap模式意外移动，第二次点击

我想要做的事：

我有我希望从多个按钮（动态创建的）调用，位置靠近按钮的模式。使用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. 
});

问题：

第一次任一按钮被点击时，它工作正常（好了，我d宁可显示在上面，但现在足够了），但第二次模式显示，然后它的顶部位置正在增加由13px编辑。

我确定有些事我没有考虑，但我迷路了。我尝试.position（），只是获取/设置CSS顶部和左侧的属性，以及其他许多事情。有时间转向比我更聪明的头脑。

来源

2015-11-22 jreed121

所以，问题是position: absolute;的.modal-dialog和它在c里面ontainer。 Modals基本上应该在<body>的末尾，所以它们的位置将与文档相关，而不是其他的。

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

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

来源

2015-11-24 18:45:28 jreed121

尝试增加高度&顶部位置模式对话框

CSS

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

DEMO

我希望这有助于

来源

2015-11-22 12:25:18 Booster

我想通了。也许我的问题还不够清楚，但我希望模式出现在触发它的按钮附近。无论选择哪个按钮，您的答案都会显示在同一高度。感谢您试图帮助！ – jreed121

Bootstrap模式意外移动，第二次点击

回答

相关问题