Question

我正在使用带有ajax调用的bootbox.confirm，我收到了确认框，但我的屏幕显示为灰色，我无法选择任何内容。

这是它的样子：

我的第一个想法是，_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

请检查页面中应用于模态和主体的元素检出类，我很确定这是因为模态背景活跃并且卡住了这里有一些你可以做的事情

1）只需添加data-dismiss =＆＃34; modal＆＃34;按钮

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

首先隐藏你的模态div元素。

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

其次删除＆＃39;模态打开＆＃39;来自身体和＆＃39; .modal-backdrop＆＃39;在页面的末尾。

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

Answer 2

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

查看：

@{
    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>

jquery bootbox屏幕显示为灰色

2 个答案: