Doubt on loading data via Modal Bootstrap

Question

Doubt on loading data via Modal Bootstrap

Navigation

#1 by (0 votes)
#2 by (0 votes)

4

Hello, friends. Once again I need your help. I am migrating from my small system to Bootstrap. I'm implementing modal windows in several 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 listing.php page, the user clicks one of the records displayed on the screen to access more details. With this, it is directed to the page see_detalhes.php? Cod

php twitter-bootstrap

asked by anonymous 02.07.2016 / 17:01

2 answers

Remove part of text inside column in MYSQL Apply a transform with perspective

score 0 · Answer 1

Here's 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 );
});

score 0 · Answer 2

The solution to your problem is to do the z-index for each of the modes:

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>