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

Question

I am playing with jQuery imgareaselect plugin located here: https://plugins.jquery.com/imgareaselect/

and works like so:

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

here's a fiddle for pure imgAreaSelect to demonstrate that it does work http://jsfiddle.net/kurtgn/vaf5f9mf/

and here's one that triggers a modal window and tries to apply the same imgAreaSelect to the same image (inside the modal). http://jsfiddle.net/kurtgn/f0x8o2L7/

why doesn't the latter work?

Answer 1

You can use imgAreaSelect right after the modal is opened by using its shown.bs.modal event. Like this

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

Also, the parent should be .modal-content and not #modal-content . (That's not the issue though)

Here is a demo http://jsfiddle.net/dhirajbodicherla/f0x8o2L7/7/

PS:

Made the below changes to the button so that the modal window is opened on click

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

Answer 2

Remove this line and it will work:

parent: '#modal_content'  

Your code should now look like :

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

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