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
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');
}
});
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 dobootstrap.css
.
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.
-
Funcionou. Só tive que usar um !important nessa declaração. Muito obrigado pela ajuda. Commented 29/06/2015 às 11:24