5

Tenho uma modal que abre sobre outra modal, como eu faria para não permitir que essa modal que está aberta sobre a outra modal não fechasse quando eu clicar fora dela. Obs: estou usando o bootstrap, já tentei usa "data-backdrop="static"" e não funcionou.

Consegui descobrir o que estava acontecendo, na verdade era um erro, a class "data-backdrop="static"" estava no lugar errado, então basta utilizar ela que vai funcionar corretamente

6
  • 4
    Coloque parte do seu código aqui. Commented 7/08/2014 às 13:49
  • 1
    Coloque parte do seu código para analisarmos melhor. E uma dica é tentar evitar essa funcionalidade, por questão de usabilidade, pois abrir um modal dentro de outro modal não traz boa experiência para o usuário. Commented 20/08/2014 às 19:35
  • 1
    Wilson, responda sua questão adicionando uma resposta, não responda dentro da própria questão.
    – Paulo
    Commented 23/08/2014 às 21:06
  • @bfavaretto Como que ela é duplicada se ela foi criada antes desta que esta marcada ? Commented 9/12/2015 às 19:40
  • @Highlander A cronologia não importa, deixei aquela como principal por ter mais resposta. Talvez seja o caso de mesclar as duas perguntas, estou pensando.
    – bfavaretto
    Commented 9/12/2015 às 19:41

2 Respostas 2

2

Na documentação do bootstrap pode-se ler um alerta dizendo que a sobreposição de janelas modais não é suportada, sendo assim você poderá ter alguns problemas fazendo isso que deseja.

Overlapping modals not supported

Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.

O bootstrap possui uma limitação com as janelas modais por não gerenciar o z-index. Por isso, ao abrir uma modal sobre outra acontecerá vários erros como por exemplo o que estava ocorrendo com você de um fundo ficar abaixo do outro ou fechar as duas janelas abertas ao mesmo tempo.

Algumas soluções para esse problema já foram encontradas.

1 - Solução via CSS

Se você sempre possuir no máximo duas janelas abertas um sobre a outra, você pode controlar diretamente pelo CSS

HTML

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>

<div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Modal title</h4>
        </div><div class="container"></div>
        <div class="modal-body">
          Content for the dialog / modal goes here.
          <br>
          <br>
          <br>
          <br>
          <br>
          <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Close</a>
          <a href="#" class="btn btn-primary">Save changes</a>
        </div>
      </div>
    </div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Second Modal title</h4>
        </div><div class="container"></div>
        <div class="modal-body">
          Content for the dialog / modal goes here.
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Close</a>
          <a href="#" class="btn btn-primary">Save changes</a>
        </div>
      </div>
    </div>
</div>

CSS

.modal:nth-of-type(even) {
    z-index: 1042 !important;
}
.modal-backdrop.in:nth-of-type(even) {
    z-index: 1041 !important;
}

Javascript

$('#openBtn').click(function(){
    $('#myModal').modal({show:true})
});

2 - Solução baseado em eventos do plugin do bootstrap

O plugin do bootstrap possui eventos que podem ser escutados para executar alguma funcão necessária.

Veja o exemplo no jsfiddle

$('.modal').on('show.bs.modal', function(event) {
    var idx = $('.modal:visible').length;
    $(this).css('z-index', 1040 + (10 * idx));
});
$('.modal').on('shown.bs.modal', function(event) {
    var idx = ($('.modal:visible').length) -1; // raise backdrop after animation.
    $('.modal-backdrop').not('.stacked').css('z-index', 1039 + (10 * idx));
    $('.modal-backdrop').not('.stacked').addClass('stacked');
});
$('.modal').on('hidden.bs.modal', function(event) {
    if ($('.modal:visible').length > 0) {
        setTimeout(function() {
            $(document.body).addClass('modal-open');
        }, 0);
    }
});

3 - Solução alterando o plugin do bootstrap

Localize o código abaixo

if (transition) {
   that.$element[0].offsetWidth // force reflow
}   

that.$element
   .addClass('in')
   .attr('aria-hidden', false)

that.enforceFocus()

e altere para

if (transition) {
    that.$element[0].offsetWidth // force reflow
}

that.$backdrop
   .css("z-index", (1030 + (10 * $(".modal.fade.in").length)))

that.$element
   .css("z-index", (1040 + (10 * $(".modal.fade.in").length)))
   .addClass('in')
   .attr('aria-hidden', false)

that.enforceFocus()

Existem plugin que complementam o bootstrap, busque por "Bootstrap Manager" que irá encontrar vários.

Fonte

2

Vamos direto a resposta:

Usando setTimeout, pois o .modal-backdrop não é criado quando o evento show.bs.modal é acionado.

$(document).ready(function () {
    $('#abrir').click(function () {
        $('#myModal').modal({
            show: true
        })
    });
        $(document).on('show.bs.modal', '.modal', function (event) {
            var zIndex = 1040 + (10 * $('.modal:visible').length);
            $(this).css('z-index', zIndex);
            setTimeout(function() {
                $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
            }, 0);
        });
});
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 <a data-toggle="modal" href="#myModal" class="btn btn-primary">Abrir</a>
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                	<h4 class="modal-title">Modal 1</h4>
            </div>
            <div class="container"></div>
            <div class="modal-body">Alguma coisa aqui dentro.
              <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Abrir</a>
            </div>
            <div class="modal-footer">
              <a href="#" data-dismiss="modal" class="btn btn-danger">Fechar</a>
	<a href="#" class="btn btn-primary">Outro botão a ser implementado</a>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal2">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                	<h4 class="modal-title">Modal 2</h4>
            </div>
            <div class="container"></div>
            <div class="modal-body">Alguma coisa aqui dentro.
              <a data-toggle="modal" href="#myModal3" class="btn btn-primary">Abrir</a>
            </div>
            <div class="modal-footer">
              <a href="#" data-dismiss="modal" class="btn btn-danger">Fechar</a>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal3">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                	<h4 class="modal-title">Modal 3</h4>
            </div>
            <div class="container"></div>
            <div class="modal-body">Acho que até aqui deu pra compreender...
            </div>
            <div class="modal-footer">
              <a href="#" data-dismiss="modal" class="btn btn-danger">Fechar</a>
            </div>
        </div>
    </div>
</div>

Referência

1
  • Você poderia incluir o código na própria resposta? Vai que o jsfiddle cai ou some...
    – bfavaretto
    Commented 9/12/2015 às 19:18

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