Search code examples
c#jqueryasp.net-mvcbootbox

jquery bootbox screen is greyed out

I am using bootbox.confirm with an ajax call, and I get the confirm box, but my screen is greyed out and I'm unable to select anything.

Here is what it looks like:

enter image description here

My first thought is that maybe my scripts are referenced wrong in _Layout, but I'm not sure:

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

Bundles

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
    "~/Scripts/jquery-{version}.js",
    "~/Scripts/moment.js",
    "~/Scripts/bootstrap-datetimepicker.js",
    "~/Scripts/jquery-ui.js",
    "~/Scripts/Scripts.js"
);

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
    "~/Scripts/bootstrap.js",
    "~/Scripts/bootbox.js",
    "~/Scripts/respond.js"));

When inspecting here is what I have:

<body class="modal-open">

<div class="modal-backdrop fade in"></div>
<div class="modal-dialog">...</div>

Here is my script:

$(document).ready(function () {

    var table = $("#Table").DataTable();

    $("#Table.js-delete").on("click",
        function () {

            var link = $(this);
            $("body").removeClass("modal-open");


            bootbox.confirm("Are you sure you want to delete this?",
                function (result) {

                    $(".modal-backdrop").remove();
                    if (result) {
                        $.ajax({
                            url: "/api/Informations/" + $(this).attr("data-id"),
                            method: "DELETE",
                            success: function () {
                                table.row(link.parents("tr")).remove().draw();
                                link.parents("tr").remove();
                            }
                        });
                    }
                });


            });
    });
Solution

  • please do inspect element check out classes applied to modal and main body in your page,i'm pretty sure this is because modal-backdrop active and stucked here are few things you can do

    1) just add data-dismiss="modal" to button

    2)If modal hide or visible, faded background is remained and does not let you click any where you can forcefully remove those by using below piece of code.

    first hide your modal div element.

    $('modalId').modal('hide');

    secondly remove 'modal-open' class from body and '.modal-backdrop' at the end of the page.

    $('body').removeClass('modal-open');
$('.modal-backdrop').remove();