13

Conforme documentação do bootstrap: Modal

Múltiplas modais não são suportadas e requerem código adicional.

Estou tentando abrir várias modais dentro de outras, estas modais são chamadas de arquivos externos com data-remote e estou tendo um problema, elas ficam uma dentro das outras, parece redundante mas é como se o index delas ficasse no mesmo que a modal anterior.

Atualização da documentação sobre o metodo remoto:

Original:

This option is deprecated since v3.3.0 and has been removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.

If a remote URL is provided, content will be loaded one time via jQuery's load method and injected into the .modal-content div. If you're using the data-api, you may alternatively use the href attribute to specify the remote source. An example of this is shown below: <a data-toggle="modal" href="remote.html"data-target="#modal">Click me</a>

Tradução:

Esta opção esta obsoleta desde v3.3.0 e sera removida na versão 4. Nós recomendamos inves de utilizar o remote usar client-side templating ou data binding ou chamar o metodo load do jQuery.

Se uma URL remota é fornecido, o conteúdo será carregado uma vez através do método load do jQuery e injetado na div .modal-content. Se você estiver usando data-api, poderá preferir usar o atributo href para especificar a origem remota. Um exemplo disso é mostrado abaixo: <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

Exemplo:

Página 1:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title></title>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet">
   </head>
   <body>
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

      <div class="modal fade" id="myModal" tabindex="-1" data-remote="pagina2.html" role="dialog" aria-labelledby="myModalLabel">
         <div class="modal-dialog" role="document">
            <div class="modal-content">
            </div>
         </div>
      </div>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
      <script type="text/javascript">

      </script>
   </body>
</html>

Página 2:

<div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
   <h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
   <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal 2</button>

</div>
<div class="modal-footer">
   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   <button type="button" class="btn btn-primary">Save changes</button>
</div>



<div class="modal fade" id="myModal2" tabindex="-2" data-remote="pagina3.html" role="dialog" aria-labelledby="myModalLabel">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
      </div>
   </div>
</div>

O resultado será algo como: inserir a descrição da imagem aqui

Como poderia resolver este problema ?

15
  • 1
    Tem um plugin muito bom chamado Bootbox para criar alerts, confirms e prompts, em todos os meus projetos eu não deixo de usa-los pela praticidade. Ele implementa o multi-modal talvez dar uma olhada no código dele ajude.
    – KaduAmaral
    Commented 17/08/2015 às 11:32
  • 1
    Para que criar múltiplas modais se você pode concentrar tudo em uma única modal? Basta trocar o conteúdo, texto, formulário, etc. na hora de de carregá-la. Commented 17/08/2015 às 13:57
  • Estas modais são utilizadas em várias partes do sistema, desta forma eu utilizo data-remote para chamar cada uma das telas, elas podem ser modais ou não, usar tudo em uma requer reescrita de código em várias partes do projeto coisa que eu quero ao maximo evitar Commented 17/08/2015 às 14:00
  • Vc só precisa dizer qual é o layout da modal que será carregada. Não precisa criar 500 modais pra isso. Commented 17/08/2015 às 14:02
  • 1
    @Highlander atualizei a resposta, ficou na seção 2 do post, funcionando usando remote e href. Commented 10/12/2015 às 11:11

6 Respostas 6

6

Em vez de você criar vários modais, use somente o data-target chamando o conteúdo para dentro do seu modal data-target="#id_objeto" e passe os parâmetros ou comportamento via data-qualquercoisa:

<div id="id_objeto">Seu conteúdo</div>

Você pode fazer o seu conteúdo dinâmico dessa maneira

Ou pode fazer um modal dentro de modal dessa maneira

10
  • utilizei o seu modelo para criar um modal dentro do while. Porém ao abrir um modal, vi pelo f12 que ele cria um elemento { padding-right:17px} e a cada modal que abro ele vai somando os 17px; ... Analisei meus arquivos e não encontrei nenhum padding. Tem noção de oq esta criando este elemento? Commented 28/08/2015 às 12:24
  • esse problema que está ocorrendo provavelmente é por causa da referência do botão. Commented 28/08/2015 às 16:34
  • Fala cara.... foi o seu tutorial que segui... no caso vc fala de qual botão? Foi aquele bloco do Modal não é utilizado... oq esta trazendo os dados ´esta linha: <a href="single.php?id=<?php echo $posts['id']?>" data-id="1" data-toggle="modal" data-content="<h2>Título de exemplo 1</h2><p>Conteúdo feito dentro do modal 1</p>" data-title="Este título é o atributo 1" data-target="#element" data-button="mudar texto do botão salvar" title="<?php echo $posts['titulo']; ?>" > Commented 28/08/2015 às 16:48
  • estou tratando este problema por este link: pt.stackoverflow.com/questions/83128/… Commented 28/08/2015 às 16:52
  • Ivan eu removi os botões, porém o problema persiste. Commented 28/08/2015 às 17:16
3

Você pode tentar lidar com modais múltiplas trabalhando com o backdrop e o Z-index do Modal.

Como?

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

Acredito que este código deve ajudar.

Referência


Agora, quanto o uso do data-remote, uma vez que um objeto Modal é instanciado, ele é ligado ao elemento alvo. Cada chamada subsequente não irá atualizar os valores nas opções do remote. De forma que os atributos são diferentes para cada instância, quando o Modal é alternado, o valor do data-remote não está sendo atualizado.

Além do fato anterior, o plugin responsável pelo Modal carrega o data-remote no construtor do objeto Modal, de forma que mesmo que uma alteração seja feita para as opções do remote ele nunca vai ser recarregado.

Uma gambiarra possível de ser implementada seria:

$('body').on('hidden.bs.modal', '.modal', function () {
  $(this).removeData('bs.modal');
});

Ou você pode tentar dificultar as coisas e fazer algo como uma verificação do caminho da página que deve aparecer no modal, se é ou não diferente da anterior. Se for, destruir; se não for, então não há necessidade de recarregar.

$('[data-load-remote]').on('click',function(e) {
    e.preventDefault();
    var $this = $(this);
    var remote = $this.data('load-remote');
    if(remote) {
        $($this.data('remote-target')).load(remote);
    }
});
<a href="#myModal" role="button" class="btn" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/q89Lhmss/0/show/" data-remote-target="#myModal .modal-body">Página 1</a>
<a href="#myModal" role="button" class="btn" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/ng75mLnz/0/show/" data-remote-target="#myModal .modal-body">Página 2</a>
<a href="#myModal" role="button" class="btn" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/jvr0dj61/0/show/" data-remote-target="#myModal .modal-body">Página 3</a>
<a href="#myModal" role="button" class="btn" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/zsjq4u8z/0/show/" data-remote-target="#myModal .modal-body">Página 4</a>

<div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal Principal</h3>
  </div>
  <div class="modal-body">
    <p>Alguma coisa</p>
  </div>
  <div class="modal-footer">
    <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Fechar</button>
  </div>
</div>

Exemplo funcionando AQUI.

Referência

7
  • 1
    É exatamente isto que eu quero evitar, estou usando jQueryUI dialog para fazer isto e vou sair dele para usar outro que faz o mesmo ? Interessante seria extender a função modal para suportar estas duas funções. Commented 8/12/2015 às 18:56
  • @Highlander atualizei a resposta, para tentar ajudar neste contexto também, qualquer dúvida é só perguntar. Commented 8/12/2015 às 19:36
  • +1 Testando sua solução Commented 8/12/2015 às 19:42
  • @Highlander funcionou como o esperado? Commented 9/12/2015 às 17:43
  • Não funcionou, este exemplo faz a mesma coisa que o meu exemplo: jsfiddle.net/filadown/Lyp615jw você conseguiu pegar o meu código na pergunta e simular o problema ? cria a pag1 coloca o conteudo cria a pag2 coloca o conteudo, cria a pag 3 e tenta abrir elas na modal. Commented 9/12/2015 às 18:07
2

Segue exemplo de fazer essa coisa ai com jquery ui

var $modal = $('<div>');
        $modal.css('line-height','1').html('teste1')
            .dialog({width :400,height: 250,modal: true,closeOnEscape: false,title:'Aviso',
                buttons: { Ok:function(){ $(this).remove(); } }
            }); 

var $modal = $('<div>');
        $modal.css('line-height','1').html('teste2')
            .dialog({width :400,height: 250,modal: true,closeOnEscape: false,title:'Aviso',
                buttons: { Ok:function(){ $(this).remove(); } }
            }); 
var $modal = $('<div>');
        $modal.css('line-height','1').html('teste3')
            .dialog({width :400,height: 250,modal: true,closeOnEscape: false,title:'Aviso',
                buttons: { Ok:function(){ $(this).remove(); } }
            }); 
var $modal = $('<div>');
        $modal.css('line-height','1').html('teste4')
            .dialog({width :400,height: 250,modal: true,closeOnEscape: false,title:'Aviso',
                buttons: { Ok:function(){ $(this).remove(); } }
            }); 
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

2

No Bootstrap os modais remotos são abertos em modal-content e o conteúdo remoto, ou modal remoto, tem as partes básicas como header, body e footer. Você deveria repetir pela lógica. A pergunta é como é que você vai renderizar o segundo, terceiro, quarto... modais se no primeiro dado remoto o modal não carrega uma classe 'modal-content'?

Explico!

Você tem na primeira página:

<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</a>

<div class="modal fade" id="myModal" tabindex="-1" data-remote="http://fiddle.jshell.net/hwksuycy/20/show/" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    
    
    <!-- é essa classe que importa no Bootstrap 3.5 -->
    <div class="modal-content">
        <!-- o segundo modal será carregado aqui ou terá como alvo (target) esse elemento âncora, a CLASSE modal-content -->  
    </div>
  </div>
</div>

Veja o FIDDLE

A classe modal-content é o que realmente importa aqui, como pode ser visto na documentação.

Agora, na página remota você tem o seguinte:

<div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
   <h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
   <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal 2</button>

</div>
<div class="modal-footer">
   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   <button type="button" class="btn btn-primary">Save changes</button>
</div>



<div class="modal fade" id="myModal2" tabindex="-2" data-remote="pagina3.html" role="dialog" aria-labelledby="myModalLabel">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
      </div>
   </div>
</div>

Ou seja, você tem primariamente a estrutura do conteúdo de um modal, mas não tem a classe modal-content que seia a âncora do segundo modal, que carrega uma modal-content, mas que não tem uma como parent.

Bem, uma solução simples seria utilizar a extensão Bootstrap Modal.

Dê uma olhada na seção "Stackable".

1
+50

Pelo que entendi você deseja abandonar o jQueryUI.

Seguindo o funcionamento dele o carregamento é feito pelo método open, e neste open é carregado a nova url utilizando o load.

Como é no jQueryUI:

Exemplo HTML:

 <!-- DECLARANDO DIV -->
 <div id="cliente">

Exemplo JS:

$('#cliente').dialog({
   autoOpen: false,
   height: 550,
   width: 860,
   modal: true,
   title: 'Cliente',
   show: "blind",
   buttons: {
      'Sair': function () {
         $(this).dialog('close');
      }
   },
   position: {
      at: 'top'
   },
   open: function () {
      $(this).load('cliente.html'); // Aqui permitimos que seja carregado a página.
   }
});

// Chamando a dialog no click 
 $('#cliente').dialog("open");

Agora reproduzindo esta estrutura no Bootstrap:

Exemplo HTML:

 <!-- DECLARANDO DIV -->
 // Apenas acrescentamos a classe para dar o efeito do Bootstrap.
 <div id="cliente" class="modal fade">

Exemplo JS:

function loadModal(id,url){
    $('#' + id).on('show.bs.modal', function () {
        $(this).load(url);
    });
}
// Chamando a função:
loadModal('Cliente','cliente.html')

// Chamando a modal no click, você pode usar tanto js quanto html usando o href:
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Cliente</a>

E nas suas páginas deverá ser incluido todo conteúdo dentro da classe modal-dialog:

<div class="modal-dialog">
  <div class="modal-content modal-lg">
    <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">
      <h1> Algum conteúdo aqui.</h1>
    </div>
    <div class="modal-footer">
      <a href="#" data-dismiss="modal" class="btn btn-danger">Pesquisar</a>
    </div>

    <div class="modal fade" id="myModal3" data-remote="index3.html">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">

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

Dentro dessas páginas incluídas você poderá abrir quantas modais quiser usando a função loadModal().

Apenas não se esqueça de declarar a div na página inicial.

Aguardo seu Feedback.

1
  • 1
    Sua solução foi a mais simples para resolver este problema,perfeito. Commented 14/12/2015 às 10:46
1

Eu consegui fazer isso criando contêineres para cada modal, cada um com um z-index diferente, assim um modal conseguia sobrepor o outro.

<div id="modalContainer"><!-- seu primeiro modal aqui --></div>
<div id="subModalContainer"><!-- seu segundo modal aqui --></div>

E no CSS:

#modalContainer { z-index: 100; }
#subModalContaineer { z-index: 1000; }

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 .