imgAreaSelect problem with bootstrap modal

[hrushi9]

I'm Using AdminLTE-2.3.0 template, jquery.imgareaselect.js
I'm using bootstrap modal to submit form via ajax. Inside Modal I have preview of image before upload. And imgareaselect is not working well that I proceed further with image cropping.
ScreenShot of error is attached.
Please help.
Thanks.

imgareaselect-animated.css

.imgareaselect-border1 {
    background: url(images/border-anim-v.gif) repeat-y left top;
}
.imgareaselect-border2 {
    background: url(images/border-anim-h.gif) repeat-x left top;
}
.imgareaselect-border3 {
    background: url(images/border-anim-v.gif) repeat-y right top;
}
.imgareaselect-border4 {
    background: url(images/border-anim-h.gif) repeat-x left bottom;
}
.imgareaselect-border1, .imgareaselect-border2, .imgareaselect-border3, .imgareaselect-border4 {
    filter: alpha(opacity=50);
    opacity: 0.5;
}
.imgareaselect-handle {
    background-color: #fff;
    border: solid 1px #000;
    filter: alpha(opacity=50);
    opacity: 0.5;
}
.imgareaselect-outer {
    background-color: #000;
    filter: alpha(opacity=50);
    opacity: 0.5;
    position: absolute !important;
    display: inline-block
}
.imgareaselect-selection {
    position: absolute;
}

javascript for preview and fire imgAreaSelect

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $('#photo').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}

 $("#imgInp").change(function() {
    readURL(this);
  });

  $('#photo').imgAreaSelect({
    handles: true,
    aspectRatio: '1:1',
    fadeSpeed: 300,
    parent: "#thumbBox"

  })

HTML

<div class="form-group" >
  <label>Image</label>
  <div class="input-group">   
    <input type="file" class="form-control" name="image" id="imgInp" />
  </div>

  <br/>

  <div id="thumbBox" style="display:inline-block !important; overflow: auto  !important; min-width:300px; max-width:860px; max-height:500px; padding:5px; position:relative;"> <img id="photo" src="" alt="image"  style="padding:25px" /></div>
</div>