Summernote Modals locked within pure Bootstrap modals

Question

Is there a known way to cause summernote modals to break out from within 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:

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>

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

Ruffi

Answer 1

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

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

Topcoat

This actually fixes my problem where closing the insert link modal was closing the parent modal as well. And yes, the spelling of "dialogue" is correct up there. – Rabbitry

Answer 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):-

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:-

$("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:-

.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?

Lodi

Answer 3

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.

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:

$(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.

The following issued describing those code:

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

Basketball

Answer 4

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

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

Pisano

Answer 5

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.

enter image description here

Brooch

Answer 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.

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

Topmast

Answer 7

I had the same error when using summernote inside a bootstrap modals. and this is how I solved it and it worked fine

$('.editor-Answer').summernote(
    {
        inheritPlaceholder: true,
        dialogsInBody: true
    }
);

$(document).on("hidden.bs.modal", '.modal', function () {
    $(".modal:visible").length && $("body").addClass("modal-open");
});

Authority

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Gemstone