jquery bootbox 屏幕变灰

Question

我正在使用 bootbox.confirm 调用 ajax，我收到了确认框，但我的屏幕是灰色的，我无法 select 任何操作。

这是它的样子：

我的第一个想法是 _Layout 中可能引用了我的脚本错误，但我不确定：

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

捆绑包

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"));

我检查的时候是这样的：

<body class="modal-open">

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

这是我的脚本：

$(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();
                            }
                        });
                    }
                });


            });
    });

Answer 1

这对我有用。你可以试试这个：

查看：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index58</title>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="~/Scripts/bootbox.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                bootbox.confirm("This is the default confirm!",
                    function (result) {
                        console.log('This was logged in the callback: ' + result);
                    });
            })
        })
    </script>
</head>
<body>
    <div>
        <input type="button" value="ShowModal" id="btn" />
    </div>
</body>
</html>

Answer 2

请检查元素检查 classes 应用于页面中的模态和主体，我很确定这是因为模态背景处于活动状态且卡住这里有几件事你可以做

1) 只需将 data-dismiss="modal" 添加到按钮

2) 如果模态隐藏或可见，褪色的背景仍然存在，并且不允许您单击任何可以使用以下代码强制删除它们的地方。

首先隐藏模态 div 元素。

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

其次删除正文中的 'modal-open' class 和页面末尾的“.modal-backdrop”。

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

jquery bootbox 屏幕变灰

jquery bootbox screen is greyed out

c#

asp.net-mvc

jquery

bootbox