代码之家 › 专栏 › 技术社区 › radbyx Matt

带有jQuery UI的Bootstrap Dialog也可以拖动模式区域

jquery-ui-draggable twitter-bootstrap-3 jquery-ui twitter-bootstrap jquery

radbyx Matt · 技术社区 · 10 年前

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

我如何避免这种影响,所以对话框旁边的所有内容都是模态的?

我使用:

引导: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>

1 回复 | 直到 10 年前

radbyx Matt 8 年前

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

事实证明,我只是拖动了错误的DOM元素。

解决方案:

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

推荐文章

xajetin · 导航不更改滚动上的颜色

3 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

3 年前

Bryan Santos · 固定表头与引导

3 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

3 年前

tym · 根据用户偏好显示字段

3 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

3 年前

Pavel · 当验证DIV可见时,引导网格会移动

7 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

7 年前

Alexander David · 折叠卡打开,然后立即再次关闭

7 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

7 年前