Пользовательский модал не отображается правильно внутри Datatable

Question

У меня есть кнопка внутри Datatable, которая открывает модал. Модалы отлично работают вне таблицы данных, это только внутри. Это мой стол "

value = $("#disaster_Id").val();
var tableDamageArea = $("#DamagedAreatable").DataTable({

    columnDefs: [{
        className: "dt-center", "targets": "_all"
    }],
    ajax: {
        url: "/api/disaster/GetDamagedAreaByDisasterId",
        data: { DisasterId: value },
        dataSrc: ""
    },
    columns: [
        //{
        //    data: "Id",
        //    render: function (data) {
        //        return "<button id='btnEditArea' class='js-view btnInsideTable' data-area-id= '" + data + "'>Edit</button>";
        //    }
        //},
        {
            data: "Area"
        },
        {
            data: "CompletePercent"
        },
        {
            data: "Id",
            render: function (data) {
                debugger;
                   return "<a data-target='#custom-modal-Area-Image' data-toggle='modal' data-animation='fadein' data-plugin='custommodal' data-overlaySpeed='200' data-overlayColor='#36404a' class='js-viewImage btn btn-custom waves-effect waves-light' data-area-id= " + data + ">Images</a>"
            }
        },
        {
            data: {
                Id: "Id",
                DisasterId: "DisasterId"
            },
            render: function (data) {
                return "<a href='/Disaster/PrintArea/" + data.Id + "?DisasterId=" + data.DisasterId + "'>Print Document</a>";
            }
        },
        {
            data: "Id",
            render: function (data) {
                return "<button id='btnEditArea' style='padding-top:0px; padding-bottom: 0px' class='js-delete btn btn-custom waves-effect waves-light' data-customer-id=" + data + ">Delete</button>";
            }
        }
    ]
});

   $(document).ready(function () {
    $("#DamagedAreatable").on("click", ".js-viewImage", function () {

        debugger;
        $('#custom-modal-Area-Image').show();

    });
});

Модал взят из шаблона начальной загрузки, поэтому, как я уже сказал, он отлично работает за пределами кнопок с данными. Это мой модал:

<div id="custom-modal-Area-Image" class="modal-demo">
<button type="button" class="close" onclick="Custombox.modal.close();">
    <span>&times;</span><span class="sr-only">Close</span>
</button>
<h4 class="custom-modal-title">Area Images</h4>
<div class="custom-modal-text text-left">
    @using (Html.BeginForm("AddImages", "Disaster", FormMethod.Post, new { id = "ImagesAreaform", enctype = "multipart/form-data" }))
    {
        <div style="text-align: center">
            <div style="text-align: center">
                <input id="FileAttachment1" name="FileAttachment1" type="file" multiple style="width: 100%; margin: auto;" class="dropZone" />
            </div>

            <div class="btn_Div">
                <button class="btn btn-custom waves-effect waves-light m-b-20" id="btnUploadImage">Upload Images</button>
            </div>
        </div>
        <input id="selectedAreaId" type="hidden" name="AreaID" />
        @Html.HiddenFor(m => m.disaster.Id, new { @id = "disaster_Id", @name = "disaster_Id" })
        @Html.TextBoxFor(m => m.damageArea.Id, new { @id = "damageArea_Id", @name = "damageArea_Id" })
        @Html.AntiForgeryToken()
    }

    <div style="padding-top: 10px; width: 100%">
        <table id="AreaImgs" style="width: 100%;" class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Uploaded Date</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

</div>

Фон впереди, и я даже ничего не могу коснуться. Это то, что я получаю. Предполагается, что изображения области являются моими модальными и находятся внизу, где находится в html, но они должны быть в центре. Пожалуйста помоги https://i.stack.imgur.com/mBZA1.png