Summernot Mods in reinen Bootstrap-Mods gesperrt

Question

Gibt es eine bekannte Möglichkeit, Sommernotmodale innerhalb von Bootstrap-Mods auszubrechen?

---

Ich habe ein normales Modal mit einem Summernote Element, nichts besonderes.

Wenn ich summernote Funktionen zu verwenden, wenn ich summernote innerhalb eines Bootstrap-modal verwenden, ist es das, was ich bekommen:

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> 

kompletter Bootply:http://bootply.com/113808

Answer 1

ich hatte das gleiche Problem, und für die Zeit gedrückt wird, kam mit dieser Lösung nach oben (im Wesentlichen der summernote Modalverben in ‚normalen‘ divs dreht, nicht explizit Modalverben dh die Klasse entfernen ‚modal ‚): -

summernote.js (die vollständige Datei bearbeitet): -

Suchen Sie die folgenden Zeilen und ändern: -

(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>' + 

Dann Code einige benutzerdefinierte jQuery hinzufügen, wo Sie anrufen 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(){ 

schließlich einige CSS hinzufügen: -

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

Hoffnung, das hilft?

Answer 2

Weil Sie ein Modal in einem anderen Modal öffnen. Dies ist nicht empfohlen

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

Answer 3

Mit summernote 0.6.13+ versuchen, mit dem dialogsInBody-Parameter initialisiert:

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

Answer 4

ich auch dieses Problem Jungs gestoßen und ein anderes Problem kommt. Die übergeordnete modale Rolle zerstört, wenn das model-modal schließen. Hier ist die Lösung. Ich habe gerade dieses $ ("body"). AddClass ("modal-open") in Zeile 2020 von summernote.js hinzugefügt. Inside "hideDialog" -Methode.

enter image description here

Answer 5

hatte ich die gleichen Probleme vor und löste sie, indem sie die folgenden Schritten berechnet wird:

Erste Sie dialogsInBody: true Stellen Sie sicher angeben, wenn eine summernote Instanz erstellen.

Second Um verschachtelte Multi Bootstrap-modale Dialoge verwendet in summernote zu unterstützen und zeigt Tooltips und popover registrieren die folgenden Event-Handler zur Unterstützung in einem globalen Standort:

$(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); 
}); 

Der vorherige Code unterstützt verschachtelte Bootstrap modals Dialoge und Tooltips und Popover. Die folgenden Bilder zeigen die Ergebnisse:

Sie können die oben z-index für die gewünschten Werte einzustellen.

Die folgende ausgegeben beschreibt diejenigen Code:

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

Answer 6

Ich habe das gleiche Problem, wenn summernote innerhalb eines Bootstrap modals verwenden. Wenn ich Bilder/Videos/Links hinzufügen möchte, erscheinen die Summernoten Modal hinter dem übergeordneten Modal. So löse ich meine Probleme.

$('.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'); 
});