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
    });
})

jquery imgAreaSelect在bootstrap模态窗口中不起作用

2 个答案: