是否有已知的方法可以使 Summernote 模态从 Bootstrap 模态中爆发出来?
我有一个普通的模态,里面有一个 Summernote 元素,没有什么特别的。
当我使用 Summernote 功能时,如果我在 boostrap 模式中使用 SummerNote,这就是我得到的:
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">
× 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>
完整的Bootply:http://bootply.com/113808
使用 Summernote 0.6.13+ 尝试使用dialogsInBody参数进行初始化:
$('#dropping').summernote({
dialogsInBody: true
});
我遇到了同样的问题,并且迫于时间,想出了这个解决方案(本质上是将 Summernote 模态转换为“正常”div,而不是显式模态,即删除“模态”类):-
summernote.js(编辑了完整文件):-
查找以下行并更改为:-
(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">×</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">×</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">×</button>' +
然后添加一些自定义 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(){
最后添加一些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;}
希望有帮助吗?
我之前也遇到过同样的问题,并通过以下步骤解决了它们:
第一 确保在创建 Summernote 实例时指定
dialogsInBody: true
。
第二 为了支持 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);
});
之前的代码将支持嵌套引导模式对话框、工具提示和弹出窗口。下图显示了结果:
您可以将上述 z-index 调整为您想要的值。
以下发布描述了这些代码:
https://github.com/summernote/summernote/issues/2644 https://github.com/summernote/summernote/issues/2457
因为您在另一个模态框内打开一个模态框。 这不是推荐的做法
在引导模式中使用 Summernote 时,我遇到了同样的问题。当我想添加图像/视频/链接时,summernote 模态出现在父模态后面。这就是我解决问题的方法。
$('.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');
});
在引导模式中使用 Summernote 时,我遇到了同样的错误。这就是我解决它的方法并且效果很好
$('.editor-Answer').summernote(
{
inheritPlaceholder: true,
dialogsInBody: true
}
);
$(document).on("hidden.bs.modal", '.modal', function () {
$(".modal:visible").length && $("body").addClass("modal-open");
});