右上角显示 Bootbox 警报答案

【问题标题】：Bootbox alert displaying in the top right右上角显示 Bootbox 警报
【发布时间】：2018-06-28 21:01:31
【问题描述】：

美好的一天，我正在尝试使用引导箱警报向用户显示我的 json 响应中返回的数据。但是，模态窗口在屏幕的右上角弹出而不是居中。有什么帮助吗？请不要说我的母版页有对 jquery 和 bootstrap 的引用。

    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
    <script src="~/Scripts/DataTables/dataTables.bootstrap.min.js"></script>
    <script src="~/Scripts/bootbox.min.js"></script>

    <script>
        $(document).ready(function () {
            $('.page-wrapper').css("background-color", "");
            $("#divProcessing").hide();

            $('form').on('submit', function (e) {
                e.preventDefault();

                $('body .page-wrapper').css("background-color", "rgba(0,0,0,0.5)");
                $("#divProcessing").show();

                $.ajax({
                    url: "/BulkEmail/UploadEmailList",
                    type: this.method,
                    data: new FormData(this),
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        if (data.isValid) {
                            bootbox.alert(data.error);
                        }
                        else
                        {

                            bootbox.alert('It worked');
                        }
                        $('body .page-wrapper').css("background-color", "");
                        $("#divProcessing").hide();

                    },
                    error: function (xhr, error, status) {
                        $('body .page-wrapper').css("background-color", "");
                        $("#divProcessing").hide();
                        bootbox.alert(status);
                        console.log(error, status);
                    }
                });
            });
        });
    </script>

【问题讨论】：

正常的 Bootstrap 模态是否正确显示？ Bootbox 没有任何自己的样式，所以我假设您的 CSS 中有一些与 Bootstrap 不兼容的规则集。了解您使用的是哪个版本的 Bootstrap 也会很有帮助。

标签： jquery json asp.net-mvc bootbox

【解决方案1】：

这里是针对您的问题的指定解决方案，希望对您有所帮助

bootbox.alert('It worked').find('.modal-dialog').css('margin', 'auto');

【讨论】：

谢谢，但屏幕右上角弹出的引导箱警报对话框仍然存在问题。

【解决方案2】：

这可能是由于 .page-wrapper 中的样式。检查css。我改变了我的模态，使它们直接位于屏幕的中心。默认情况下，它们应该从顶部居中显示。如果您想让它们在屏幕中居中，请尝试以下操作：

      .modal{

       top: 50%;
       bottom: 50%;
       transform: translate(-50%, -50%);
       position: absolute;
       z-index: 1040;

     }

【讨论】：

【解决方案3】：

只需在样式表中添加以下 CSS 样式规则。

.modal-dialog {
        left: auto;
    }

【讨论】：