时间戳

首页 > 解决方案 > 在 BootstrapDialog 关闭时，html body 标签被破坏；呈现的空白页

javascript - 在 BootstrapDialog 关闭时，html body 标签被破坏；呈现的空白页

问题描述

调用 BootstrapDialog.Show。单击关闭对话框的唯一按钮“确定”后，将呈现空白页面。

检查浏览器 (Chrome) 中的代码，我发现在调用 BootstrapDialog.Show 时，body 标签获得了一个 class='modal-open'。在引导对话框中单击“确定”按钮后，对话框关闭并且 html 标记从页面中删除。_Layout.cshtml 上只剩下 Header 标记。

我希望留在打开引导对话框的原始页面上！

更多信息<<

简而言之，我有一个打开部分视图的 index.cshtml 页面。在这个局部视图中有一个按钮，一旦单击该按钮就会运行一些 javascript 来检查一些内容并在必要时调用引导对话框作为警报。在我关闭对话框之前，这很好用。

这是调用引导对话框的 javascript：

$('#btnEdit').click(function () {
        btnClicked = "edit";
        var grid = $('#gridContactList').data('kendoGrid');
        var selectedContact = grid.selectedKeyNames();

        if (!selectedContact.length) { selectedContact = 0; }

        if (selectedContact == 0) {
            //alert("Please select a contact to edit!");
            var message = "Please select a contact to edit!";
            //alert(message);               
            BootstrapDialog.show({
                type: "type-warning",
                title: "Warning!",
                message: message,
                autodestroy: true,
                buttons: [
                    {
                        label: 'OK',
                        action: function (dialogRef) {
                            dialogRef.close();
                        }
                    }
                ]
            });
            return;
        }

        $("#winContactSummary").data("kendoWindow").center(true).open();
     })

这个 BootstrapDialog 是由 nakupanda 编写的......

标签： javascriptasp.net-mvcbootstrap-dialog

解决方案

根据我发现您需要设置 HTML 以具有正确的类布局的内容，如果您提供您的 HTML 或它的示例，我将能够提供更好的帮助

        <div class="modal-content">
            <div class="modal-header">
                <div class="bootstrap-dialog-header">
                    <div class="bootstrap-dialog-close-button" style="display: block;"><button class="close">×</button></div>
                    <div class="bootstrap-dialog-title" id="2a6beb12-e208-4c63-8ffc-760a4040deb7_title">Say-hello dialog</div>
                </div>
            </div>
            <div class="modal-body">
                <div class="bootstrap-dialog-body">
                    <div class="bootstrap-dialog-message">Hi Apple!</div>
                </div>
            </div>
            <div class="modal-footer" style="display: none;">
                <div class="bootstrap-dialog-footer"></div>
            </div>
        </div>

上面的示例 HTML 来自这里 https://nakupanda.github.io/bootstrap3-dialog/

推荐阅读