Question

美好的一天，我正在尝试使用Bootbox Alert向用户显示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>

Answer 1

这是针对您的问题的指定解决方案，可能对您有帮助

Task

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警报显示在右上方

3 个答案: