summernote v0.6.16 上的问题，当我点击 link 或图片功能时，模态框在另一个模态框内打开

Question

请看下图，你就会明白我在说什么。

当我单击 link 或 Summernote BoosTrap Editor ( v0.6.16 ) 的图片功能时，模态框出现在另一个模态框内，这很奇怪。我不知道我是否有一些 CSS 覆盖了另一个或者它是否是 SummerNote 的 BUG。

夏令营url：http://summernote.org/#/

谢谢。

Answer 1

我发现了问题。在我看来，SummerNote 和 bootstrap-modal 插件不兼容。

在 SummerNote 中我找到了下面的代码：

 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>';
};

这是什么意思，当我在 SummerNote 上单击 Link 或图片功能时，他调用 .modal() 和此功能的默认行为，在 Bootstrap-modal 插件上, 是用 class="modal-dialog" 创建一个新的 div。如果我删除此 class="modal-dialog" 并重试，一切正常！

Answer 2

我想你只需要启用这个选项

dialogsInBody: true

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

summernote v0.6.16 上的问题，当我点击 link 或图片功能时，模态框在另一个模态框内打开

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

css

twitter-bootstrap

summernote