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

Question

我正在玩jQuery imgareaselect插件位于这里:https://plugins.jquery.com/imgareaselect/

，工作原理如下:

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

这里有一个纯imgAreaSelect的例子来证明它是有效的http://jsfiddle.net/kurtgn/vaf5f9mf/

，这里是一个触发模态窗口，并试图应用相同的imgAreaSelect到相同的图像(在模态)。http://jsfiddle.net/kurtgn/f0x8o2L7/

为什么后者不起作用?

Answer 1

您可以在使用imgAreaSelect的shown.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。(这不是问题所在)

这里是一个演示http://jsfiddle.net/dhirajbodicherla/f0x8o2L7/7/

PS:

对按钮进行了以下更改，以便单击

时打开模态窗口

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

Answer 2

删除这一行就可以了:

parent: '#modal_content'  

你的代码现在应该看起来像:

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