Bootbox 警报显示在右上角

Question

美好的一天，我正在尝试使用 bootbox 警报向用户显示我的 json 响应中返回的数据。但是，模态 window 弹出在屏幕的右上角，而不是居中。有什么帮助吗？请注意，我的母版页引用了 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>

Answer 1

这是针对您的问题的具体解决方案，希望对您有所帮助

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

Answer 2

可能是.page-wrapper 中的样式问题。为此检查 css。我转换模态框，使它们直接位于屏幕中央。默认情况下，它们应该从顶部居中显示。如果您想将它们置于屏幕中央，请尝试以下操作：

      .modal{

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

     }

Answer 3

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

.modal-dialog {
        left: auto;
    }

Bootbox 警报显示在右上角

Bootbox alert displaying in the top right

asp.net-mvc

jquery

json

bootbox