0

Estou utilizando o plugin Summernote para a criação de conteúdo dentro de um sistema. Mas quando estou em fullscreen e tento adicionar um link ou imagem, a modal respectiva aparece atrás do backdrop do bootstrap. Já testei alterar as z-indexes, mas sem sucesso. Alguma sugestão? Obrigado.

2 Respostas 2

2

Obtive uma solução de outra forma, porém bem simples sem alterar no código já existente. Cria-se uma classe no CSS:

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

Lembrando que deve vir após a inserção do código do bootstrap e summernote, para evitar conflitos. O código abaixo é o evento(ação) de click sobre o botão de fullscreen no modal. Esta bem documentado para evitar dúvidas:

// 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');
    }
});
1

Você pode corrigir esse problema adicionando o atributo z-index: -1 na classe modal-backdrop.

Outras considerações:

  • Verifique se o seu modal está fora de qualquer div ou elemento da sua página, sempre coloque-os antes da sua tag </body>.
  • Verifique se você não está incluindo o bootstrap.js antes do bootstrap.css.

Exemplo no JSFiddle.

Eu vi que você disse que já tentou alterar os z-index, porém eu estava com esse mesmo problema, tentava por o z-index do modal maior que o do backdrop e também não funcionava.

1
  • Funcionou. Só tive que usar um !important nessa declaração. Muito obrigado pela ajuda.
    – Alexandre
    Commented 29/06/2015 às 11:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .