Summernote Modals鎖定在純Bootstrap模態中

Question

有沒有一種已知的方法可以使summernote模態從bootstrap模態中突破？

---

我有一個正常情況下與其中的summernote元素，沒有什麼特別的。

當我使用summernote功能，如果我用一個自舉模式中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"> 
         &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> 

完成Bootply：http://bootply.com/113808

Answer 1

我有同樣的問題，並被推時間，想出了這個解決方案（實際上把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">&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>' + 

然後一些自定義的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;} 

希望幫助？

Answer 2

因爲你在另一個模態中打開一個模態。 這不是一個推薦的做法

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

Answer 3

隨着summernote 0.6.13+嘗試用dialogsInBody參數初始化：

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

Answer 4

我也遇到了這個問題的傢伙，另一個問題出現了。當summernote模式關閉時，父模式滾動被破壞。繼承人修復。我剛剛在summernote.js的2020行添加了這個$​​（「body」）。addClass（「modal-open」）。裏面有「hideDialog」方法。

enter image description here

Answer 5

我收到了同樣的問題，並通過應用以下步驟來解決它們：

首先 確保指定dialogsInBody: true時創建summernote實例。

二 爲了支持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); 
}); 

前面的代碼將支持嵌套引導模態對話框和工具提示和popover。下面的圖片顯示的結果：

可以調整上述的z-index爲您所需的值。

下發布過這些代碼：

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

Answer 6

我使用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'); 
});