夏季笔记模式锁定在纯引导模式

Is there a known way to cause summernote modals to break out from within bootstrap modals?

有没有一种已知的方法可以让summernote modals从bootstrap modals中脱颖而出?

---

I have a normal modal with a summernote element within it, nothing special whatsoever.

我有一个正常的模态，里面有一个夏天的元素，没什么特别的。

When I use summernote features, if I use summernote within a boostrap modal, this is what I get:

当我使用summernote特性时，如果我在boostrap模式中使用summernote，我得到的是:

JS:

JS:

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

HTML:

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>

Complete Bootply: http://bootply.com/113808

完整的bootp:http://bootply.com/113808

6 个解决方案

#1

With summernote 0.6.13+ try initializing with the dialogsInBody-Parameter:

使用dialogsInBody-Parameter方法，使用summernote 0.6.13+尝试初始化:

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

#2

I had the same issue, and being pushed for time, came up with this solution (essentially turning the summernote modals into 'normal' divs, not explicitly modals i.e. remove the class 'modal'):-

我也遇到了同样的问题，被时间推着，提出了这个解决方案(本质上是把注释模态变成“正常的”模态，而不是明确的模态，例如删除类“模态的”):-

summernote.js (edited the full file):-

summernote。js(编辑完整文件):-

Look for the following lines and change to:-

查找下列行并将其改为:-

(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>' +

Then some custom jQuery code to add to where you call summernote:-

然后一些自定义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(){

Finally add some css:-

最后添加一些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;}

Hope that helps?

希望能帮助吗?

#3

I also encountered this problem guys and another problem comes up. The parent modal scroll destroyed when the summernote modal close. Heres the fix. I just added this $("body").addClass("modal-open") on line 2020 of summernote.js. Inside "hideDialog" method.

我也遇到了这个问题，还有一个问题。父模态卷轴在夏令模态结束时被销毁。这是修复。我刚刚在summernote.js的2020行中添加了$(“body”). addclass(“modal-open”)。在“hideDialog”方法。

enter image description here

在这里输入图像描述

#4

Because you open a modal inside another modal. This is not a recommended practice

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

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

http://getbootstrap.com/javascript/情态动词

#5

I had the same problems before and solved them by applying the following steps:

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

First Make sure you specify dialogsInBody: true when create a summernote instance.

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

Second To support nested multi bootstrap modal dialogs used in summernote and to support showing tooltips and popover register the following event handlers in a global location:

第二，支持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);
});

The previous code will support nested bootstrap modals dialogs and tooltips and popover. the following images show the results:

前面的代码将支持嵌套的引导模式对话框、工具提示和弹窗。以下图像显示结果:

You can adjust the above z-index for your desired values.

您可以根据需要的值调整上面的z索引。

The following issued describing those code:

下列文件描述了这些守则:

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

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

#6

I have the same problem when using summernote inside a bootstrap modals. When I want to add images/videos/links the summernote modals appears behind the parent modal. So this is how I solve my problems.

我在使用bootstrap modals时也遇到了同样的问题。当我想添加图片/视频/链接时，summernote modals出现在父模式的后面。这就是我解决问题的方法。

$('.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');
});