Bootstrap: abrir outro modal no modal

95

Portanto, estou usando este código para abrir outra janela modal em uma janela modal aberta atualmente:

<a onclick=\"$('#login').modal('hide');$('#lost').modal('show');\" href='#'>Click</a>

O que acontece é que por cerca de 500ms a barra de rolagem se duplicará. Acho que porque o modal atual ainda está desaparecendo. No entanto, parece muito desagradável e gaguejante.

Eu apreciaria quaisquer sugestões para resolver este problema.

Além disso, construir isso em um evento onclick não é profissional?

Estou trabalhando com o bootstrap versão 3.0.

Edit: Acho que é necessário reduzir o tempo de desvanecimento de um modal. Como isso é possível?

javascript jquery twitter-bootstrap modal-dialog twitter-bootstrap-3 AlexioVay
fonte
3
Um exemplo prático
CrandellWS

Respostas:

86

data-dismiss faz a janela modal atual fechar

data-toggleabre um novo modal com o hrefconteúdo dentro dele

<a data-dismiss="modal" data-toggle="modal" href="#lost">Click</a>

ou

<a data-dismiss="modal" onclick="call the new div here">Click</a>

deixe-nos saber se funciona.

Jayeshkv
fonte
Obrigado, funciona e evita usar "onclick". Mas o animatiom ainda dobra a barra de rolagem por um segundo.
AlexioVay
@ user2829128 isso é o que data-dismissfaz. Ele fecha a janela atual e abre uma nova. Você pode postar seu código em bootplyou jsfiddle?
jayeshkv
14
A rolagem não funcionaria no segundo modal se a altura fosse longa.
Giraldi
O mesmo aqui com bootstrap v4. Quando clico no botão do primeiro mondal ele abre um outro modal, o segundo modal é mostrado com scroll de corpo. O problema está na classe .modal-aberto para o corpo. Ele remove quando clicamos e não adicionamos novamente.
fdrv
7
.modal { overflow-y: auto }resolve o problema de rolagem do BS4.
Riki137
84

Minha solução não fecha o modal inferior, mas realmente se acumula em cima dele. Ele preserva o comportamento de rolagem corretamente. Testado no Bootstrap 3. Para que os modais sejam empilhados conforme o esperado, você precisa ordená-los em sua marcação Html do menor ao maior.

$(document).on('hidden.bs.modal', function (event) {
  if ($('.modal:visible').length) {
    $('body').addClass('modal-open');
  }
});
Expandir trecho

ATUALIZAÇÃO: quando você empilhar modais, todos os cenários aparecem abaixo do modal inferior. Você pode corrigir isso adicionando o seguinte CSS:

.modal-backdrop {
    visibility: hidden !important;
}
.modal.in {
    background-color: rgba(0,0,0,0.5);
}

Isso dará a aparência de um fundo modal abaixo do modal visível mais acima. Dessa forma, ele esmaece seus modais inferiores.

H Dog
fonte
2
Os itens posteriores na marcação da página têm um Z-index naturalmente mais alto e serão empilhados acima dos itens que apareceram anteriormente na marcação. A menos que você defina um Z-index explícito.
H Dog
1
@H Dog: exatamente o que eu precisava :) funciona perfeitamente. obrigado!
Tobias Koller
2
Verdadeiramente lendário !! Eu ficava louco sempre que alguém sugeria usar um plugin apenas para isso ... só queria ter uma solução simples para um problema simples e pronto ... Parabéns!
Fr0zenFyr,
2
Muito obrigado, pela SUA ajuda .A sua solução foi sanado meu problema, quando utilizo dois modais ao mesmo tempo !!!!!
Levon,
3
Javascript funcionou para Bootstrap 4, mas CSS não. Em vez disso, escondi o pano de fundo e adicionei .modal: após {conteúdo: ""; display: bloco; fundo: rgba (0,0,0, 0,5); posição: fixa; topo: 0; inferior: 0; largura: 100%; índice z: -1; }
Jason G.
18

tente isso

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test1">Open Modal 1 </button>



<div id="test1" class="modal fade" role="dialog" style="z-index: 1400;">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      
      <div class="modal-body">
      	<button type="button" class="btn btn-info btn-lg" data-toggle="modal"      data-target="#test2">Open Modal 2</button>
      	
      </div>      
    </div>
  </div>
</div>

<div id="test2" class="modal fade" role="dialog" style="z-index: 1600;">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      
      <div class="modal-body">
      	
        content
      	
      </div>      
    </div>
  </div>
</div>
  

</body>
</html>
Expandir trecho

Elon Gomes Vieira
fonte
1
fail for me .. = (o modal funciona, mas se o 1o modal for longo que um scroll para o 1o modal aparece e quando você abre o 2o modal e fecha-o, o primeiro modal não funciona.
Vincent Dapiton
Muito obrigado, foi uma grande ajuda :)
Daniel Muñoz
17

Você pode realmente detectar quando o modal antigo fecha chamando o hidden.bs.modalevento:

    $('.yourButton').click(function(e){
        e.preventDefault();

        $('#yourFirstModal')
            .modal('hide')
            .on('hidden.bs.modal', function (e) {
                $('#yourSecondModal').modal('show');

                $(this).off('hidden.bs.modal'); // Remove the 'on' event binding
            });

    });

Para obter mais informações: http://getbootstrap.com/javascript/#modals-events

Giraldi
fonte
16

Atualização para 2018 - Usando Bootstrap 4

Descobri que a maioria das respostas parece ter muito jQuery desnecessário. Para abrir um modal de outro modal pode ser feito simplesmente usando os eventos que o Bootstrap fornece, como show.bs.modal. Você também pode querer algum CSS para lidar com as sobreposições de fundo. Aqui estão os 3 modais abertos de outros cenários ...

Abrir modal a partir de outro modal (manter o 1º modal aberto)

<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">
              <h4 class="modal-title">Modal title</h4>    
              <button type="button" class="close" data-dismiss="modal">×</button>
            </div><div class="container"></div>
            <div class="modal-body">
              ...
              <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Open modal2</a>
            </div>
            <div class="modal-footer">
              <a href="#" data-dismiss="modal" class="btn">Close</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">
              <h4 class="modal-title">2nd Modal title</h4>
              <button type="button" class="close" data-dismiss="modal">×</button>
            </div><div class="container"></div>
            <div class="modal-body">
              ..
            </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>

Um problema potencial neste caso é que o pano de fundo do 2º modal oculta o 1º modal. Para evitar isso, faça o segundo modal data-backdrop="static"e adicione algum CSS para corrigir os Z-indexes dos cenários ...

/* modal backdrop fix */
.modal:nth-of-type(even) {
    z-index: 1052 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1051 !important;
}

https://www.codeply.com/go/NiFzSCukVl

Abrir modal a partir de outro modal (fechar 1o modal)

Isso é semelhante ao cenário acima, mas como estamos fechando o primeiro modal quando o segundo é aberto, não há necessidade de corrigir o CSS do pano de fundo. Uma função simples que manipula o 2º show.bs.modalevento modal fecha o 1º modal.

$("#myModal2").on('show.bs.modal', function (e) {
    $("#myModal1").modal("hide");
});

https://www.codeply.com/go/ejaUJ4YANz

Abrir modal dentro de outro modal

O último cenário de múltiplos modais está abrindo o 2º modal dentro do 1º modal. Neste caso, a marcação para o 2º é colocada dentro do 1º. Nenhum CSS ou jQuery extra é necessário.

<div class="modal" id="myModal1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal title</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="container"></div>
            <div class="modal-body">
                ...
                <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal 2</a>
            </div>
            <div class="modal-footer">
                <a href="#" data-dismiss="modal" class="btn">Close</a>
            </div>
        </div>
    </div>

    <div class="modal" id="myModal2">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">2nd Modal title</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="container"></div>
                <div class="modal-body">
                    ...
                </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>

https://www.codeply.com/go/iSbjqubiyn

Zim
fonte
Não funciona no Bootstrap 4. Ao fechar o 2º modal, o 1º não pode mais rolar.
Justin
@ Justin - Não vejo um cenário específico que demonstre isso, pois a rolagem está fora do escopo da pergunta original. Eu sugiro que você procure ou faça outra pergunta específica para o problema de rolagem.
Zim
O enésimo tipo não funcionou para mim porque não olha para a classe. Eu comecei a trabalhar com: .modal-backdrop.show + .modal.show { z-index: 1052 !important; } .modal-backdrop.show + .modal.show + .modal-backdrop.show { z-index: 1051 !important; }
webhead
14

Modais no modal:

$('.modal-child').on('show.bs.modal', function () {
    var modalParent = $(this).attr('data-modal-parent');
    $(modalParent).css('opacity', 0);
});
 
$('.modal-child').on('hidden.bs.modal', function () {
    var modalParent = $(this).attr('data-modal-parent');
    $(modalParent).css('opacity', 1);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Modals in Modal</a>


<div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
             
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <a href="#myModal1" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 1</a>
                <a href="#myModal2" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 2</a>
            </div>

        </div>
    </div>
</div>

<div id="myModal1" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header 1</h4>
            </div>
            <div class="modal-body">
                <p>Two modal body…1</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button>
            </div>

        </div>
    </div>
</div>

<div id="myModal2" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header 2</h4>
            </div>
            <div class="modal-body">
                <p>Modal body…2</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button>
            </div>

        </div>
    </div>
</div>
Expandir trecho

RedDevil2015
fonte
fail for me .. = (o modal funciona, mas se o 1o modal for longo que um scroll para o 1o modal aparece e quando você abre o 2o modal e fecha-o, o primeiro modal não funciona.
Vincent Dapiton
O exemplo acima gera modal no lugar do primeiro modal, nem no topo nem dentro (o primeiro não está mais visível).
JackTheKnife
Efeito muito bom.
Jorge B.
Como é possível usar sua solução na IU Semântica?
vahidsamimi
9

Trabalhando em um projeto que tem muitos modais chamando outros modais e alguns caras do HTML que podem não saber iniciá-lo todas as vezes para cada botão. Chegou a uma conclusão semelhante à de @gmaggio, relutantemente depois de percorrer o longo caminho primeiro.

EDIT: Agora suporta modais chamados via javascript.

EDIT: Abrindo um modal de rolagem de outro modal agora funciona.

$(document).on('show.bs.modal', function (event) {
    if (!event.relatedTarget) {
        $('.modal').not(event.target).modal('hide');
    };
    if ($(event.relatedTarget).parents('.modal').length > 0) {
        $(event.relatedTarget).parents('.modal').modal('hide');
    };
});

$(document).on('shown.bs.modal', function (event) {
    if ($('body').hasClass('modal-open') == false) {
        $('body').addClass('modal-open');
    };
});

Basta colocar o botão de chamada modal normalmente e, se ele for selecionado para estar dentro de um modal, ele fechará o atual primeiro, antes de abrir o especificado no data-target. Observe que relatedTargeté fornecido pelo Bootstrap.

Eu também adicionei o seguinte para suavizar um pouco o desbotamento: Tenho certeza que mais pode ser feito.

.modal-backdrop.fade + .modal-backdrop.fade {
    transition: opacity 0.40s linear 0s;
}
Ren
fonte
Não é 100% seu problema, mas o gancho mostrado.bs.modal é bem útil. O gerenciamento da classe body.modal-open parece ser problemático no BS v.3.3.5, após fechar um modal e abrir outro, ele está faltando e, portanto, o plano de fundo está rolando em vez do (segundo) modal. Seu gancho pode corrigir esse comportamento.
Manuel Arwed Schmidt
7

A documentação do Twitter diz que o código personalizado é necessário ...

Isso funciona sem JavaScript extra, porém, CSS customizado seria altamente recomendado ...

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalOneModal">
      Launch demo modal
    </button> 
            <!-- Modal -->
            <div class="modal fade bg-info" id="modalOneModal" tabindex="-1" role="dialog" aria-labelledby="modalOneLabel" aria-hidden="true">
    
              <div class="modal-dialog">
          
                <div class="modal-content  bg-info">
                  <div class="modal-header btn-info">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="modalOneLabel">modalOne</h4>
                  </div>
                  <div id="thismodalOne" class="modal-body bg-info">
                
                
              <!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#twoModalsExample">
      Launch demo modal
    </button>
             
                    <div class="modal fade bg-info" id="twoModalsExample" style="overflow:auto" tabindex="-1" role="dialog" aria-hidden="true">
                <h3>EXAMPLE</h3>
            </div>
                  </div>
                  <div class="modal-footer btn-info" id="woModalFoot">
                    <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
    <!-- End Form Modals -->
Expandir trecho

CrandellWS
fonte
1
Aqui está outro exemplo com o segundo modal sendo devidamente formatado bootply.com/qRsvPSrcO5
Zim
1
@Skelly alterar o Z-index como você fez no css é uma boa ideia ...z-index: 1080 !important;
CrandellWS
4
Se você abrir o 2º modal e clicar fora, haverá bug. (Chrome, mais recente)
Martin Braun
talvez eu esteja errado, mas acredito que os documentos dizem para não colocar um modal em um modal, então isso não é surpreendente
CrandellWS
7

Para o bootstrap 4, para expandir a resposta de @helloroy, usei o seguinte; -

var modal_lv = 0 ;
$('body').on('shown.bs.modal', function(e) {
    if ( modal_lv > 0 )
    {
        $('.modal-backdrop:last').css('zIndex',1050+modal_lv) ;
        $(e.target).css('zIndex',1051+modal_lv) ;
    }
    modal_lv++ ;
}).on('hidden.bs.modal', function() {
    if ( modal_lv > 0 )
        modal_lv-- ;
});

A vantagem do acima é que ele não terá nenhum efeito quando houver apenas um modal, ele só entra em ação para múltiplos. Em segundo lugar, delega o manuseio ao organismo para garantir que os futuros modais que não são gerados atualmente ainda sejam atendidos.

Atualizar

Mudar para uma solução combinada js / css melhora a aparência - a animação de esmaecimento continua a funcionar no pano de fundo; -

var modal_lv = 0 ;
$('body').on('show.bs.modal', function(e) {
    if ( modal_lv > 0 )
        $(e.target).css('zIndex',1051+modal_lv) ;
    modal_lv++ ;
}).on('hidden.bs.modal', function() {
    if ( modal_lv > 0 )
        modal_lv-- ;
});

combinado com o seguinte css; -

.modal-backdrop ~ .modal-backdrop
{
    z-index : 1051 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
    z-index : 1052 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
    z-index : 1053 ;
}

Isso vai lidar com modais aninhados até 4 de profundidade, que é mais do que eu preciso.

smartbloke
fonte
Não funciona no Bootstrap 4. Ao fechar o 2º modal, o 1º não pode mais rolar.
Justin
4

Experimente isto:

// Hide the login modal
$('#login').modal('hide');

// Show the next modal after the fade effect is finished
setTimeout(function(){ $('#lost').modal('show'); }, 500);

Este hack simples funciona para mim.

cristão
fonte
4

Para quem usa bootstrap 4 https://jsfiddle.net/helloroy/tmm9juoh/

var modal_lv = 0;
$('.modal').on('shown.bs.modal', function (e) {
    $('.modal-backdrop:last').css('zIndex',1051+modal_lv);
    $(e.currentTarget).css('zIndex',1052+modal_lv);
    modal_lv++
});

$('.modal').on('hidden.bs.modal', function (e) {
    modal_lv--
});
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-a">
  Launch demo modal a
</button>

<div class="modal fade" id="modal-a" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-b">
  Launch another demo modal b
</button>
<p class="my-3">
Not good for fade In.
</p>
<p class="my-3">
who help to improve?
</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-b" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-c">
  Launch another demo modal c
</button>
<p class="my-3">
But good enough for static modal
</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


<div class="modal" id="modal-c" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
<p class="my-3">That's all.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
Expandir trecho

Helloroy
fonte
Isso é ótimo, o único problema que resta é evitar o reaparecimento da barra de rolagem quando o modal superior é fechado
HyperActive,
Como posso usar sua solução na IU semântica?
vahidsamimi
2

Também tive alguns problemas com meus modais de rolagem, então fiz algo assim:

  $('.modal').on('shown.bs.modal', function () {
    $('body').addClass('modal-open');
    // BS adds some padding-right to acomodate the scrollbar at right
    $('body').removeAttr('style');
  })

  $(".modal [data-toggle='modal']").click(function(){
    $(this).closest(".modal").modal('hide');
  });

Servirá para qualquer modal dentro de um modal que venha a aparecer. Observe que o primeiro está fechado para que o segundo possa aparecer. Nenhuma mudança na estrutura do Bootstrap.

teefars
fonte
2

Eu fui por um caminho diferente todos juntos, eu decidi "desaninhá-los". Talvez alguém ache isso útil ...

var $m1 = $('#Modal1');
var $innermodal = $m1.find(".modal");     //get reference to nested modal
$m1.after($innermodal);                  // snatch it out of inner modal and put it after.
Dylan Hayes
fonte
Muito obrigado
2

Meu código funciona bem usando dispensa de dados.

<li class="step1">
    <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox1">
        <p class="text-label">Step 1</p>
        <p class="text-text">Plan your Regime</p>
    </a>

</li>
<li class="step2">
    <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox2">
        <p class="text-label">Step 2</p>
        <p class="text-text">Plan your menu</p>
    </a>
</li>
<li class="step3 active">
    <a href="#" class="button-popup" data-toggle="modal" data-dismiss="modal" data-target="#lightbox3">
        <p class="text-label">Step 3</p>
        <p class="text-text">This Step is Undone.</p>
    </a>
</li>
user3675926
fonte
1

Feche o primeiro modal Bootstrap e abra o novo modal dinamicamente.

$('#Modal_One').modal('hide');
setTimeout(function () {
  $('#Modal_New').modal({
    backdrop: 'dynamic',
    keyboard: true
  });
}, 500);
Abhishek
fonte
1

Por que não apenas mudar o conteúdo do corpo modal?

    window.switchContent = function(myFile){
        $('.modal-body').load(myFile);
    };

No modal basta colocar um link ou um botão

    <a href="Javascript: switchContent('myFile.html'); return false;">
     click here to load another file</a>

Se você deseja apenas alternar entre 2 modais:

    window.switchModal = function(){
        $('#myModal-1').modal('hide');
        setTimeout(function(){ $('#myModal-2').modal(); }, 500);
        // the setTimeout avoid all problems with scrollbars
    };

No modal basta colocar um link ou um botão

    <a href="Javascript: switchModal(); return false;">
     click here to switch to the second modal</a>
Carlo
fonte
É mais como uma resposta relacionada à UX, porque eu precisava disso para exibir uma mensagem de erro sobre o Modal nº 1. Portanto, o Modal # 2 apresentou a mensagem de erro. Mas já se passou muito tempo desde que fiz essa pergunta e estou fazendo esse tipo de coisa de maneira diferente agora.
AlexioVay
0

tente isto:

$('.modal').on('hidden.bs.modal', function () {
//If there are any visible
  if($(".modal:visible").length > 0) {
      //Slap the class on it (wait a moment for things to settle)
      setTimeout(function() {
          $('body').addClass('modal-open');
      },100)
  }
});
Rakesh Vadnal
fonte
0

A resposta dada por H Dog é ótima, mas essa abordagem estava realmente me dando alguma cintilação modal no Internet Explorer 11. Bootstrap primeiro ocultará o modal removendo a classe 'modal-open' e então (usando a solução H Dogs) adicionamos o classe 'modal-open' novamente. Eu suspeito que de alguma forma isso está causando a cintilação que eu estava vendo, talvez devido a alguma renderização HTML / CSS lenta.

Outra solução é evitar o bootstrap ao remover a classe 'modal-open' do elemento body. Usando o Bootstrap 3.3.7, essa substituição da função interna hideModal funciona perfeitamente para mim.

$.fn.modal.Constructor.prototype.hideModal = function () {
    var that = this
    this.$element.hide()
    this.backdrop(function () {
        if ($(".modal:visible").length === 0) {
            that.$body.removeClass('modal-open')
        }
        that.resetAdjustments()
        that.resetScrollbar()
        that.$element.trigger('hidden.bs.modal')
    })
}

Nesta substituição, a classe 'modal-open' só é removida quando não há modais visíveis na tela. E você evita que um frame remova e adicione uma classe ao elemento body.

Basta incluir a substituição após o bootstrap ter sido carregado.

Adão
fonte
-4 

$(document).on('hidden.bs.modal', function (event) {
  if ($('.modal:visible').length) {
    $('body').addClass('modal-open');
  }
});

Alex Sh.
fonte