Bootstrap summernote v0.6.16上的问题,当我点击链接或图片功能时,模态会在另一个模态中打开

d8tt03nd  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(3)|浏览(142)

请看下面的图片,你会看到我在说什么。
当我点击Summernote BoosTrap编辑器(v0.6.16)的链接或图片功能时,模态出现在另一个模态中,这很奇怪。我不知道我是否有一些CSS覆盖了另一个CSS,或者是否是Summernote的BUG。
摘要URL:http://summernote.org/#/

  • 谢谢-谢谢
sqxo8psd

sqxo8psd1#

我发现了这个问题。在我看来,这是SummerNote和引导模式插件之间的不兼容。
在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上的链接或图片功能时,他会调用.modal(),而在Bootstrap-modal插件上,此函数的默认行为是使用class=“modal-dialog”创建一个新的div。如果我删除此class=“modal-dialog”并重试,一切都会正常工作!

enxuqcxy

enxuqcxy2#

我认为您只需要启用此选项
对话框正文:真的

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

drnojrws3#

正如最初在this issue上指出的那样,Summernote的工作人员已经在文档中包含了该解决方案,其中包括以下选项:

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

但是,即使您遇到了冻结底层模态的bug,您也可以使用这个丑陋但方便且简短的解决方法:

$('.modal.link-dialog').on('hide.bs.modal', () => {
    setTimeout(() => {
        if ($('.modal:not(.link-dialog)').hasClass('show')) {
            $('body').addClass('modal-open');
        }
    }, 0);
});

当另一个模态处于活动状态时,它基本上将modal-open类重新添加到body

相关问题