javascript - 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

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>

Answer 2

删除此行，它将起作用：

parent: '#modal_content'  

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

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

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