错误的位置imgAreaSelect插件在bootstrap模式窗口中

Question

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

 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接口是尼特,但在某些情况下它会搞砸!我曾经搜索过很多,但我找不到任何有用的东西.我该如何解决这个问题？

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

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

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

我们必须相对于我们自己初始化的父框(父级:"#thumbBox").

Answer 1

有同样的问题.解决方案是:

parent:$('.modal-content')

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

Answer 2

我的意思是您想要在其上使用图像区域选择的 Image 的父 div 必须是相对位置的。

 <div id="thumbBox" style="position:relative;">
     <img id="thumb" class="img-responsive" />
   </div>

我们必须从 jquery.imageareaselect.js 中删除这些行：

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