Image Crop modal does not appear

Question

I am using Croppic for cropping my images. My screen fades out but Modal foes not appear.

<div class="col-lg-4 " id="timelineProfilePic">
   <div id="cropContainerModal">
    @if(Auth::user()->profile)
     <img src="/user/{{Auth::user()->profile->thumbnil}}" class="bgImage">
     @endif
    </div>
   <input type="hidden" name="_token" value="{{csrf_token()}}" id="pic_token">
</div>
<script>
var croppicContainerModalOptions = {
    uploadUrl: '<?php echo url()?>/users/cover',
    cropUrl: '<?php echo url()?>/users/crop',
    modal: true,
    imgEyecandyOpacity: 0.4,
    loaderHtml: '<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
    onBeforeImgUpload: function () {
        console.log('onBeforeImgUpload')
    },
    onAfterImgUpload: function () {
        console.log('onAfterImgUpload')
    },
    onImgDrag: function () {
        console.log('onImgDrag')
    },
    onImgZoom: function () {
        console.log('onImgZoom')
    },
    onBeforeImgCrop: function () {
        console.log('onBeforeImgCrop')
    },
    onAfterImgCrop: function () {
        console.log('onAfterImgCrop')
    },
    onReset: function () {
        console.log('onReset')
    },
    onError: function (errormessage) {
        console.log('onError:' + errormessage)
    }
}
var cropContainerModal = new Croppic('cropContainerModal', croppicContainerModalOptions);
</script>