4

Olá, amigos. Mais uma vez preciso da ajuda de vocês. Estou fazendo a migração do meu pequeno sistema para Bootstrap. Estou implementando janelas modal em diversas partes do sistema. Acredito que uma das vantagens da janela Modal é o fato de o usuário poder acessar os dados sem precisar sair da página atual.

Na página listagem.php, o usuário clica em um dos registros exibidos na tela para acessar mais detalhes. Com isso, é direcionado para a página ver_detalhes.php?cod=(codigo) a assim acessa os dados solicitados. Daí então, caso queira acessar outro registro, é necessário clicar no botão voltar e assim escolher outro registro.

Com a janela Bootstrap, observei que esse será bem mais prático. Basta clicar no registro desejado e acessar os dados via modal Bootstrap. Estou fazendo esta implementação, mas estou com algumas dúvidas. Gostaria de saber se estou fazendo da maneira correta.

Na página listagens.php, coloquei o botão:

<a data-toggle="modal" href="ver_detalhes.php?cod=<?php echo $codigo;?>" data-target="#myModal">Visualizar</a>

Dentro desta mesma página, após a tag body, coloquei o esqueleto do modal:

  <!-- Janela Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body"></div>

        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Na página ver_detalhes.php, inseri seguinte codigo da janela modal (não sei se é necessário) com os dados PHP solicitados, ficando da seguinte forma:

<div class="modal-header bg-primary">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <h4 class="modal-title">Visualizar acessos - Banco de Currículos</h4>
        </div>          <!-- /modal-header -->


          <div class="modal-body">

//AQUI INSERI O CODIGO PHP EXIBINDO OS DADOS DESEJADOS

            </div>          <!-- /modal-body  -->
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>    

Resultado:

A Janela modal é exibida com os dados solicitados, porém, verifiquei que a cada vez que abro a tela modal, o background vai ficando cada vez mais escurecido. Ou seja, no primeiro clique, o background está normal. Ao fechar e abrir novamente o modal, o background fica mais escuro, e assim sucessivamente. É como se a cada vez que ele carregasse o número incrementados de modals.

Pessoal, poderiam verificar o que há de errado na estrutura acima? Essa maneira que utilizei para chamar o modal eu vi em um forum na internet.

6
  • Mas quer que a modal apareça na pagina das listagens? Ou seja, na linha que clica aparecem os dados correspondentes?
    – Miguel
    Commented 2/07/2016 às 15:06
  • Ola, miguel. Isso mesmo, assim que o usuario clica em um registro da lista, o modal eh apresentado por cima.
    – Luis
    Commented 2/07/2016 às 20:54
  • Acho que não precisaria da página ver_detalhes.php poderia fazer isto tudo na listagens.php, bem provável que o fato de o backgroundestar ficando escuro tem a ver com isto, pois o botão de fechar do modal está em outra página.
    – Igor Mello
    Commented 3/07/2016 às 21:16
  • Olá, Igor! Neste caso, caso eu não venha a utilizar a página "Ver_detalhes.php", como devo proceder para realizar a passagem de parâmetros? Da forma que fiz acima, os parametros são passados na url. E neste caso?
    – Luis
    Commented 4/07/2016 às 12:38
  • 1
    Tente passar os dados para a modal através do botão, ou dessa maneira. Commented 4/07/2016 às 16:58

2 Respostas 2

0

Veja abaixo um bom exemplo:

<p>Link 1</p>
<a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

<p>&nbsp;</p>


<p>Link 2</p>
<a data-toggle="modal" data-id="ISBN-001122" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

<div class="modal hide" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
    <p>some content</p>
    <input type="text" name="bookId" id="bookId" value=""/>
</div>
</div>

JQUERY:

$(document).on("click", ".open-AddBookDialog", function () {
    var myBookId = $(this).data('id');
    $(".modal-body #bookId").val( myBookId );
});
1
  • Olá, amigo. Mas o problema é que eu gostaria de carregar mais de um parâmetro no modal. Eu consigo usar um href carregando todos os parametros que preciso?
    – Luis
    Commented 4/07/2016 às 15:29
0

A solução para o seu problema, é fazer o z-index para cada uma das modais:

Javascript:

$(document).ready(function () {
    $('.modal')
        .on({
            'show.bs.modal': function() {
                var idx = $('.modal:visible').length;

                $(this).css('z-index', 1040 + (10 * idx));
                 var url = $(this).find('[data-url]').data('url');
                 if (url != undefined && url != '') {
                       var id = $(this).attr('id');
                      $('#'+id+' .modal-body').load(url);
                  }
            },
            'shown.bs.modal': function() {
                var idx = ($('.modal:visible').length) - 1; // raise backdrop after animation.
                $('.modal-backdrop').not('.stacked')
                .css('z-index', 1039 + (10 * idx))
                .addClass('stacked');
            },
            'hidden.bs.modal': function() {
                if ($('.modal:visible').length > 0) {
                    // restore the modal-open class to the body element, so that scrolling works
                    // properly after de-stacking a modal.
                    setTimeout(function() {
                        $(document.body).addClass('modal-open');
                    }, 0);
                }
            }
        });
});

HTML:

1) botão:

<a data-toggle="modal" data-url="ver_detalhes.php?cod=<?php echo $codigo;?>" href="#myModal" class="btn btn-primary">Visualizar</a>

2) modal:

<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">Detalhes</h4>
            </div>
             <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                     <div class="modal-body"><!--aqui fará um 'load' do conteúdo da sua URL... --></div>
                   </div>
             </div>
            <div class="modal-footer">  <a href="#" data-dismiss="modal" class="btn btn-default">Fechar</a>
            </div>
        </div>
    </div>
</div>

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 .