Search code examples
csstwitter-bootstrapsummernote

Issue on summernote v0.6.16, when I click on link or picture feature, modal opens inside another modal

Please, see image below and you will see what I talking about.

When I click on link or picture feature of Summernote BoosTrap Editor ( v0.6.16 ) the Modal appears inside another Modal, that's weird. I don't know if I have some CSS overriding another ones or if its BUG of SummerNote.

Summernote url: http://summernote.org/#/

Check out the image of Modal inside another Modal

Thanks.

Solution

  • I found the issue. In my point of view its a incompatibility between SummerNote and bootstrap-modal plugin.

    In SummerNote I found code below:

     var tplDialog = function (className, title, body, footer) {
  return '<div class="' + className + ' modal" aria-hidden="false">' +
           '<div class="modal-dialog">' +
             '<div class="modal-content">' +
               (title ?
               '<div class="modal-header">' +
                 '<button type="button" class="close" aria-hidden="true" tabindex="-1">&times;</button>' +
                 '<h4 class="modal-title">' + title + '</h4>' +
               '</div>' : ''
               ) +
               '<div class="modal-body">' + body + '</div>' +
               (footer ?
               '<div class="modal-footer">' + footer + '</div>' : ''
               ) +
             '</div>' +
           '</div>' +
         '</div>';
};

    What the meaning of this, when i click on Link or Picture feature on SummerNote he calls the .modal() and the default behavior of this function, on Bootstrap-modal Plugin, is create a new div with class="modal-dialog". If I remove this class="modal-dialog" and try again, everything works fine!