Question

我有一个可拖动的模态窗口，用户可以移动它。他们希望它在原始位置打开，每次关闭窗口并重新打开。我怎样才能做到这一点？感谢。

Answer 1

show.bs.modal 调用show实例方法时会立即触发此事件。如果由单击引起，则单击的元素可用作事件的relatedTarget属性。

默认情况下，bootstrap模式从顶部向下滑动，如果模式的位置在拖动时发生变化，则在关闭时可以使用show.bs.modal休息到原始位置，并在下次重新打开时。

$('selector').on('show.bs.modal', function () {
  // do something...
});

Demo Fiddle modal slide and open in middle

在上面的小提琴中，添加了一个自定义位置到模态所以模态幻灯片并在页面中间打开

.modalnewposition {
    -webkit-transform: translateX(-0%) translateY(25%);
    -moz-transform: translateX(-0%) translateY(25%);
    -ms-transform: translateX(-0%) translateY(25%);
    transform: translateX(-0%) translateY(25%);
}

HTML

<div id="myModal" class="modal fade modalnewposition" role="dialog">

然后创建了另一个类

.original {
    transform: translate(0px, 0px);
    transition: transform 0.3s ease-out 0s;
    transition: opacity 0.15s linear 0s;
}

使用show.bs.modal我将original选择器添加到模态，以便在显示和覆盖modalnewposition选择器之前调整它的位置，以便模态滑动并在顶部而不是在中间打开页面。

$(document).ready(function() {
    $('#myModal').on('show.bs.modal', function () {
        $('.modal').addClass("original");
    });
});

Demo Fiddle modal slide and open at top

以上示例仅用于演示您使用show.bs.modal函数可以实现的问题。

Answer 2

将此代码添加到js并在每次模态窗口关闭时执行它：

var scrollableContentOfModal = document.getElementById(...);// change it accordingly

document.querySelector(scrollableContentOfModal).scrollTop = 0;

每次模态打开时重新定位可拖动模态讨论

2 个答案: