Chủ Nhật, 14 tháng 6, 2020

Modals modal.js (Lấy giá trị id)

#### SMALL

## Button Click
<a href="#foo8" data-toggle="modal" data-target="#myModal" data-whatever="8" data-id="8">Button Click</a>

<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
   <div class="modal-dialog modal-lg" role="document">            
            <div class="modal-content"> 
                ...
            </div>
    </div>
</div>

## Function Show
<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 '.$_REQUEST["id"].'</h4>
</div>

<div class="modal-body">
'.$_REQUEST["id"].'
</div>

## Jquery
$('#myModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var recipient = button.data('whatever') // Extract info from data-* attribute;
    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    var modal = $(this)
    modal.find('.modal-title').text('New message to ' + recipient)
    modal.find('.modal-body input').val(recipient)
    $(".modal-content").load("Function Show&id="+recipient);

});

#### LARGE

## Button Click
<a href="javascript:void(0)" data-toggle="modal" data-target=".bs-example-modal-lg" data-whatever="8">Button Click</a>


## Function Show
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content"></div>
  </div>
</div>

Không có nhận xét nào:

Đăng nhận xét