javascript - Bootstrap 模式窗口中的错误位置 imgAreaSelect 插件

Question

我在使用 Bootstrap 中的 imgAreaSelect 插件时遇到问题。 我在初始化 imgAreaSelect 时设置了 parent 以防止滚动移动区域:

 thumb.imgAreaSelect({
 handles: true,
 aspectRatio: '1:1',
 fadeSpeed: 300,
 parent: "#thumbBox"
 })

这是我的 html :

<div class="modal-body">
            <div class="row">
                <div class="col-xs-12" style="font-weight:bold;">
                    Upload your picture and crop it.
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div id="thumbBox">
                        <img id="thumb" class="img-responsive" />
                    </div>
                </div>
            </div>

当我尝试选择一个区域时，ImgAreaSelect 选择了图片外的一个区域，但点(我的意思是 x1、x2 等)正是我想要的(功能正常但界面有问题)。 在较小的设备中，ImgAreaSelect 界面是 nit 但在某些情况下它会搞砸! 我曾经搜索过很多，但没有找到任何有用的东西。 我该如何解决这个问题？

更新: 我自己解决了这个... 请参阅此链接: github

我们必须从代码中删除这些行:

/* Also check if any of the ancestor elements has fixed position */ 
        if ($p.css('position') == 'fixed')
           position = 'fixed';

而且我们必须相对于我们自己初始化的父框定位(parent: "#thumbBox")。

Answer 1

遇到了同样的问题。 解决方案是:

parent:$('.modal-content')

您需要将模态内容设置为父级而不是图像容器。