javascript - 引导模式窗口未正确显示且在 ASP.NET MVC 应用程序中未正确运行

问题描述

从 ASP.NET MVC 应用程序中的视图（比如说 MyView.cshtml）中，我正在显示一个模式窗口 _MyConfirmModalWnd.cshtml。我已将模态窗口放在 Views\Shared 文件夹中。

显示了模态窗口，但有些事情不能正常工作：

外观和感觉未正确显示
十字按钮未正确放置在窗口中
当我单击十字按钮时它不起作用，模式窗口没有关闭。
尽管我指示使用 modal-dialog-centered 类，但模态窗口并未在屏幕上垂直和水平居中。

我的模态窗口如下所示：

模态窗口 _MyConfirmModalWnd.cshtml：

<div class="modal fade" id="confirmModalDialog" tabindex="-1" role="dialog" aria-labelledby="modalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Modal body              
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                <button type="button" class="btn btn-primary">Yes</button>
            </div>
        </div>
    </div>
</div>

查看 MyView.cshtml（脚本部分中的代码）：

function askForConfirmation() {

    var success = function () {
                     // Do something on button 'Yes' clicked
                  };

    var cancel = function () {
                    // Do something on button 'No' clicked
                 };                 

    var title = "Caution!";
    var message = "You are about to invoice,\nDo you want to continue?";

    showConfirmation(title, message, success, cancel);
}

showConfirmation = function (title, message, success, cancel) {        
    var modal = $("#confirmModalDialog");
    modal.find(".modal-title").html(title).end()
         .find(".modal-body").html(message).end()
         .modal({ backdrop: 'static', keyboard: false })
         .on('hidden.bs.modal', function () {
             modal.unbind();
         });
    if (success) {
        modal.one('click', '.modal-footer .btn-primary', success);
    }
    if (cancel) {
        modal.one('click', '.modal-header .close, .modal-footer .btn-default', cancel);
    }
};

也许......我是否必须在我的模态视图_MyConfirmModalWnd.cshtml中导入一些特定的javascript源文件或css文件？

更新：我在模态窗口 _MyConfirmModalWnd.cshtml 中将边距和填充设置为 0，如下所示：

<div class="modal fade" id="confirmModalDialog" tabindex="-1" role="dialog" aria-labelledby="modalCenterTitle" aria-hidden="true" style="margin:0;padding:0">
    <!-- Rest of the stuff -->
</div>

...现在模态窗口的外观似乎还可以，除了按钮“x”：

然而，尽管使用 modal-dialog-centered 来指示模态窗口，但模态窗口并未在屏幕上垂直和水平居中。为什么它不在屏幕中央？我错过了其他东西吗？

更新2：最后我对模态窗口做了一些调整：

我只为外部 div 设置了 style="padding:0px" 。保证金：0px 不是必需的。
我为关闭按钮设置了 style="margin-top:-30px"

代码下方：

<div class="modal fade" id="confirmModalDialog" tabindex="-1" role="dialog" aria-labelledby="modalCenterTitle" aria-hidden="true" style="padding:0px">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-top:-30px">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Modal body              
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                <button type="button" class="btn btn-primary">Yes</button>
            </div>
        </div>
    </div>
</div>

现在模态窗口具有以下外观：

剩下要做的事情：

在屏幕上垂直和水平居中模式窗口。

更新 3：

我通过覆盖样式做了更多的调整。我在外部 div 中添加了以下样式属性：

左边距：0px
左：42%

另外我设置了一个最小宽度：

最小宽度：15%

覆盖上述属性后，模态窗口水平居中。

要垂直居中，我必须设置样式属性 top:40% 但是一旦我添加了这个属性，模式窗口就不会显示。但是，如果我在调试模式下打开开发人员工具并打开它们，则会显示模态窗口。我不明白为什么当我添加 top:40% 属性时模态窗口会以这种方式运行....有什么想法吗？

在最终代码下方：

<div class="modal fade" id="confirmModalDialog" tabindex="-1" role="dialog" aria-labelledby="modalCenterTitle" aria-hidden="true" style="padding:0px;margin-left:0px;left:42%;min-width_15%"> <!-- NOTE:If I add top:40% then modal window is not shown,it is not being opened. It is only shown in debug mode when I make visible developer tools window -->
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-top:-30px">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Modal body              
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                <button type="button" class="btn btn-primary">Yes</button>
            </div>
        </div>
    </div>
</div>

标签： javascriptasp.net-mvcbootstrap-modal

javascript - 引导模式窗口未正确显示且在 ASP.NET MVC 应用程序中未正确运行

问题描述

解决方案

推荐阅读