Javascript jquery imgAreaSelect在引导模式窗口中不工作_Javascript_Jquery_Twitter Bootstrap_Img Area Select Jquery

Javascript jquery imgAreaSelect在引导模式窗口中不工作

javascript jquery twitter-bootstrap

Javascript jquery imgAreaSelect在引导模式窗口中不工作,javascript,jquery,twitter-bootstrap,img-area-select-jquery,Javascript,Jquery,Twitter Bootstrap,Img Area Select Jquery,我正在使用jQuery imgareaselect插件，该插件位于以下位置：工作原理如下： $('#img_for_select').imgAreaSelect({ x1: 10, y1: 10, x2: 100, y2: 100, handles: true, parent: '#modal_content' }); 这里有一把提琴给纯粹的imgAreaSelect，以证明它确实有效这里有一个触发模态窗口并尝试将相同的imgAreaSel

我正在使用jQuery imgareaselect插件，该插件位于以下位置：

工作原理如下：

$('#img_for_select').imgAreaSelect({
    x1: 10,
    y1: 10,
    x2: 100,
    y2: 100,
    handles: true,
    parent: '#modal_content'
});

这里有一把提琴给纯粹的imgAreaSelect，以证明它确实有效

这里有一个触发模态窗口并尝试将相同的imgAreaSelect应用于相同的图像（在模态内部）。

为什么后者不起作用？

删除此行，它将起作用：

parent: '#modal_content'

您的代码现在应该如下所示：

$('#modalWindow').click(function(){
    $('#myModal').modal();

    $('#img_for_select').imgAreaSelect({
        x1: 10, y1: 10, x2: 100, y2: 100,
        handles: true
    });
})

删除此行，它将工作：

parent: '#modal_content'

您的代码现在应该如下所示：

$('#modalWindow').click(function(){
    $('#myModal').modal();

    $('#img_for_select').imgAreaSelect({
        x1: 10, y1: 10, x2: 100, y2: 100,
        handles: true
    });
})

您可以在模态打开后立即使用imgAreaSelect，方法是使用它的

show.bs.modal

事件。像这样

    var myModal = $('#myModal').modal({
        show: false
    });

    myModal.on('shown.bs.modal', function () {
        $('#img_for_select').imgAreaSelect({
            x1: 10,
            y1: 10,
            x2: 100,
            y2: 100,
            handles: true,
            parent: '.modal-content' 
        });
    });

此外，父级应该是

.modal content

，而不是

#modal content

。（但这不是问题所在）

这是一个演示

附言：

对按钮进行以下更改，以便在单击时打开模式窗口

<button type="button" data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg" id="modalWindow">Launch demo modal</button>

启动演示模式

您可以在模态打开后立即使用imgAreaSelect，方法是使用其

显示的.bs.modal