Summernote 模态锁定在纯 Bootstrap 模态中

Posted 2023-03-22

【中文标题】Summernote 模态锁定在纯 Bootstrap 模态中

【英文标题】：Summernote Modals locked within pure Bootstrap modals

【发布时间】：2014-03-14 05:18:44

【问题描述】：

有没有一种已知的方法可以让summernote modals 从bootstrap modals 中分离出来？

---

我有一个普通的模态，里面有一个summernote元素，没什么特别的。

当我使用summernote 功能时，如果我在boostrap 模态中使用summernote，这就是我得到的：

JS：

$('#dropper').on( "show.bs.modal", function() 
    $('#dropping').summernote(
        height: 300
    );
)

HTML：

<div id="dropper" class="modal fade" tabindex="-1" data-backdrop="static" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div id="dropping">text...</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left">
                    <span class='fa fa-paperclip '></span>
                    Attach Digital Assets
                </button>
                <div class="btn-group">
                    <button type="button" class="btn btn-default opacity75" class="close" data-dismiss="modal">
                        &times; Cancel
                    </button>
                    <button type="button" class="btn btn-warning" href="javascript:postDrop()">
                        Post Status Update
                        <span class='fa fa-bullhorn '></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

完成 Bootply： http://bootply.com/113808

【参考方案1】：

使用 summernote 0.6.13+ 尝试使用 dialogsInBody-Parameter 进行初始化：

$('#dropping').summernote(
    dialogsInBody: true
);

【讨论】：

这实际上解决了我的问题，即关闭插入链接模式也关闭了父模式。是的，上面“对话”的拼写是正确的。

【参考方案2】：

我遇到了同样的问题，由于时间紧迫，我想出了这个解决方案（基本上将 Summernote 模态转换为“普通”div，而不是显式模态，即删除“模态”类）：-

summernote.js（编辑完整文件）：-

查找以下行并更改为：-

(2922 approx.) var tplImageDialog = function () 
    return '<div class="note-image-dialog" aria-hidden="false" style="z-index:9999">' +
             '<div class="modal-dialog">' +
               '<div class="modal-content">' +
                 '<div class="modal-header">' +
                   '<button type="button" class="close-summernote-dialog" aria-hidden="true" tabindex="-1">&times;</button>' +

(2946 approx.) var tplLinkDialog = function () 
    return '<div class="note-link-dialog" aria-hidden="false" style="z-index:9999">' +
             '<div class="modal-dialog">' +
               '<div class="modal-content">' +
                 '<div class="modal-header">' +
                   '<button type="button" class="close-summernote-dialog" aria-hidden="true" tabindex="-1">&times;</button>' +

(2981 approx.) var tplVideoDialog = function () 
    return '<div class="note-video-dialog" aria-hidden="false" style="z-index:9999">' +
             '<div class="modal-dialog">' +
               '<div class="modal-content">' +
                 '<div class="modal-header">' +
                   '<button type="button" class="close-summernote-dialog" aria-hidden="true" tabindex="-1">&times;</button>' +

然后将一些自定义 jQuery 代码添加到调用 summernote 的位置：-

$("button.close-summernote-dialog").click(function()

   $('.note-image-dialog').modal('hide');
   $('.note-link-dialog').modal('hide');
   $('.note-video-dialog').modal('hide');
   $('.note-help-dialog').modal('hide');

)//end of $("button.close-summernote-dialog").click(function()

最后添加一些css：-

.close-summernote-dialog float: right ; font-size: 21px ; font-weight: bold ; line-height: 1 ; color: #000000 ; text-shadow: 0 1px 0 #ffffff ; opacity: 0.2 ; filter: alpha(opacity=20);
.close-summernote-dialog:hover,
.close-summernote-dialog:focus color: #000000 ; text-decoration: none ; cursor: pointer ; opacity: 0.5 ; filter: alpha(opacity=50);
button.close-summernote-dialog padding: 0 ; cursor: pointer ; background: transparent ; border: 0 ; -webkit-appearance: none;

希望有帮助吗？

【参考方案3】：

因为您在另一个模态中打开了一个模态。 这不是推荐的做法

http://getbootstrap.com/javascript/#modals

【参考方案4】：

我也遇到了这个问题，然后又出现了另一个问题。 Summernote 模态关闭时父模态滚动被破坏。这是修复。我刚刚在 summernote.js 的 2020 行添加了这个 $("body").addClass("modal-open") 。在“hideDialog”方法中。

enter image description here

【参考方案5】：

我之前也遇到过同样的问题，通过以下步骤解决了：

首先 确保在创建 Summernote 实例时指定 dialogsInBody: true。

第二 为了支持 Summernote 中使用的嵌套多引导模式对话框并支持显示工具提示和弹出框，请在全局位置注册以下事件处理程序：

$(document).on("show.bs.modal", '.modal', function (event) 
    console.log("Global show.bs.modal fire");
    var zIndex = 100000 + (10 * $(".modal:visible").length);
    $(this).css("z-index", zIndex);
    setTimeout(function () 
        $(".modal-backdrop").not(".modal-stack").first().css("z-index", zIndex - 1).addClass("modal-stack");
    , 0);
).on("hidden.bs.modal", '.modal', function (event) 
    console.log("Global hidden.bs.modal fire");
    $(".modal:visible").length && $("body").addClass("modal-open");
);
$(document).on('inserted.bs.tooltip', function (event) 
    console.log("Global show.bs.tooltip fire");
    var zIndex = 100000 + (10 * $(".modal:visible").length);
    var tooltipId = $(event.target).attr("aria-describedby");
    $("#" + tooltipId).css("z-index", zIndex);
);
$(document).on('inserted.bs.popover', function (event) 
    console.log("Global inserted.bs.popover fire");
    var zIndex = 100000 + (10 * $(".modal:visible").length);
    var popoverId = $(event.target).attr("aria-describedby");
    $("#" + popoverId).css("z-index", zIndex);
);

之前的代码将支持嵌套的引导模式对话框和工具提示以及弹出框。下图显示了结果：

您可以将上述 z-index 调整为您想要的值。

以下发布描述了这些代码：

https://github.com/summernote/summernote/issues/2644 https://github.com/summernote/summernote/issues/2457

【参考方案6】：

在引导模式中使用 Summernote 时，我遇到了同样的问题。当我想添加图像/视频/链接时，summernote 模态出现在父模态的后面。所以这就是我解决问题的方法。

$('.summernote').summernote(
    height: 300,
    dialogsInBody: true
);

$('.note-image-dialog, .note-link-dialog, .note-video-dialog, .note-help-dialog').on('show.bs.modal', function() 
    $(this).detach().appendTo('body');
);

$('.note-image-dialog, .note-link-dialog, .note-video-dialog, .note-help-dialog').on('hide.bs.modal', function() 
    $(this).detach().appendTo('.note-dialog');
);