Summernote plugin fullscreen modal problem

Question

I’m using the Summernote plugin for creating content within a system. But when I’m on fullscreen and try to add a link or image, the respective modal appears behind the bootstrap backdrop. I have tried changing z-Dexes, but to no avail. Any suggestions? Thank you.

Answer 1

I got a solution otherwise, but very simple without changing the existing code. CSS creates a class:

<style>
    /* Amplia o modal para preencher toda tela*/
    .bodyFullscreen {
        width: 100% !important;
        height: 100% !important;
        margin: 0px 0px 0px 0px !important;
    }
</style>

Remembering that it should come after inserting bootstrap and summernote code, to avoid conflicts. The code below is the event (action) click on the fullscreen button in the modal. It is well documented to avoid doubts:

// Evento de click no botao fullscreen
$('body').on('click', '#modalNome [data-event=fullscreen]', function(event){

    // Modal que esta sendo exibido
    var modal = $('#modalNome .modal-dialog');

    // Verifica se modal possui a classe bodyFullscreen, se possuir a remove, caso contrario insere
    if(!modal.hasClass('bodyFullscreen')){
        modal.addClass('bodyFullscreen');
    }else{
        modal.removeClass('bodyFullscreen');
    }
});

Answer 2

You can fix this problem by adding the attribute z-index: -1 in class modal-backdrop.

Other considerations:

• Make sure your modal is out of any div or element of your page, always put them before your tag </body>.
• Make sure you is not including the bootstrap.js before of bootstrap.css.

Example in Jsfiddle.

_{I saw that you said you tried to change the z-index, but I had this same problem, I tried to put the z-index modal higher than backdrop and also not working.}