javascript - jQuery imgAreaSelect在引导模式窗口中不起作用

我正在使用位于以下位置的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/

后者为什么不起作用？

最佳答案

您可以在使用模式shown.bs.modal事件打开模态后立即使用imgAreaSelect。像这样

    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>