jquery bootbox屏幕是灰色的答案

【问题标题】：jquery bootbox screen is greyed outjquery bootbox屏幕是灰色的
【发布时间】：2017-04-26 20:02:39
【问题描述】：

我正在使用 bootbox.confirm 进行 ajax 调用，我得到了确认框，但我的屏幕是灰色的，我无法选择任何内容。

这是它的样子：

我的第一个想法是我的脚本可能在_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();
                            }
                        });
                    }
                });


            });
    });

【问题讨论】：

这几乎看起来像是一个 z-index 的东西，所有东西都同时出现，而且只是乱序
@Keith 你有什么推荐的？
bootstrap.css 中的@Keith.. .modal-backdrop 的类的 z-index 为 1040
jQuery UI 和 Bootbox 通常不能很好地配合使用，因为它们的一些 CSS 类和 JavaScript 函数会发生冲突。我建议使用其中一个，或者查看jQuery UI Bootstrap（尽管有一段时间没有更新）。

标签： c# jquery asp.net-mvc bootbox

【解决方案1】：

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

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

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

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

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

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

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

【讨论】：

首先隐藏你的模态 div 元素。 $('#modalId').modal('hide');
我把它放在哪里？另外，我没有 modalid.. 这个 modal 是使用 bootbox 动态创建的
分享您的完整代码或制作 jsfiddle 以便我查看
当您说完整代码时，您是指我已经放在顶部的脚本吗？还是什么？
您的 html 和与您的模态弹出窗口关联的脚本

【解决方案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>

【讨论】：