Summernote Plugin fullscreen modal problem

I got a solution in a different way, but very simple without changing the existing code. Create a class in CSS:

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

Remembering what should come after inserting the bootstrap code and summernote to avoid conflicts. The code below is the event (action) of 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');
    }
});

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

Other considerations:

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

Example in JSFiddle.

I saw that you said that you already tried to change the z-index , however I was with the same problem, I was trying to z-index of the modal greater than the backdrop and also did not work.