Question

当我打开一个Bootstrap对话框并使用jQuery的可拖动功能拖动它时，我也会拖动模态区域。问题是如果我向下拖动对话框并向右拖动100px，网站的顶部和左侧不再是模态。

如何避免这种影响，所以Dialog旁边的所有东西都是模态的？

我用：

Bootstrap：3.1.1

jQuery：jquery-2.1.1

jQuery-UI：jQuery-UI.1.11.2.js

代码示例：

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<script>
        $("#myModal").draggable({
            handle: ".modal-header"
        });
</script>

Answer 1

我有错误的心态。并且应该首先阅读jQuery-UI文档。

原来我只是拖动错误的DOM元素。

<强>解决方案：

<script>
    $(".modal-dialog").draggable({
        handle: ".modal-header"
    });
</script>

带有jQuery-UI draggable的Bootstrap Dialog也会拖动模态区域

1 个答案: