Question about data loading via Modal Bootstrap

Question

Hello, friends. Once again I need your help. I am migrating my small system to Bootstrap. I am implementing modal windows in various parts of the system. I believe that one of the advantages of the Modal window is that the user can access the data without leaving the current page.

On the page php listing., the user clicks on one of the logs displayed on the screen to access more details. With this, it is directed to the page ver_detalhes.php? Cod=(code) and thus access the requested data. Then, if you want to access another record, you need to click the back button and choose another record.

With the Bootstrap window, I noticed that this will be much more practical. Just click on the desired record and access the data via Bootstrap modal. I’m doing this implementation, but I’m having some questions. I wonder if I’m doing it the right way.

On the page php listings., push the button:

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

Inside this same page, after the tag body, I put the modal skeleton:

  <!-- 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 -->

On the page ver_details.php, I inserted the following code of the modal window (I don’t know if it is necessary) with the requested PHP data, being as follows:

<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>    

Upshot:

The modal window is displayed with the requested data, however, I checked that every time I open the modal screen, the background gets darker and darker. That is, at the first click, the background is normal. When closing and opening again the modal, the background becomes darker, and so on. It’s like every time he loads the increased number of modals.

Guys, could you check what’s wrong with the above structure? That way I used to call the modal I saw on a forum on the internet.

Answer 1

See below for a good example:

<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 );
});

Answer 2

The solution to your problem is to make the z-index for each of the modals:

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) button:

<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>