引导图像模态弹出式jQuery PHP

Question

I am building a modal to display from my image carousel. But it doesn't work - pop up come out, but with no image. I need help to see what's wrong with my code here. It is not displaying any image at all, even I don't know what's causing it. What I want to achieve is, to pop up image that click on product menu.

The images are in a view that will call the modal:

<div id="carousel" class="carousel slide" data-ride="carousel">

  <div class="carousel-inner">

    <?php 
$banyak = 0;
$id = $results->id;
$barangNama = $results->nama;
$barangHarga1 = $results->harga;
$barangGambar = $results->gambar;
$barangMerk = $results->merk;
$barangCategory = $results->category;
$barangTipe = $results->tipe;
$barangDeskripsi = $results->deskripsi;

$barangHarga = number_format($barangHarga1);

$newGambar = explode(',',$barangGambar);
//print_r($newGambar);
?>

    <?php 
$w = 0;
for($i = 0; $i < count($newGambar); $i++) {


if($w % 4 == 0){
$banyak++;
}
$w++;
//echo $banyak;
?>
    <div class="item <?php if($i == 0){echo "active";} ?>" data-thumb="<?php echo $banyak-1; ?>">
      /* this is where i call the modal */  <a href="#" data-toggle="modal" data-target="#image-gallery">
      <img src="<?php echo base_url(); ?>assets/images/product_picture/<?php echo $newGambar[$i]; ?>" alt="asda">
      </a>    
    </div>
    <?php   
}
?>
    <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>
</div>

modal to show pop up image :

<!-- Modal -->
<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">X</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="image-gallery-title"></h4>
      </div>
      <div class="modal-body">
        <img id="image-gallery-image" class="img-responsive" src="">
      </div>
      <div class="modal-footer">

        <div class="col-md-2">
          <button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
        </div>

        <div class="col-md-8 text-justify" id="image-gallery-caption">

        </div>

        <div class="col-md-2">
          <button type="button" id="show-next-image" class="btn btn-default">Next</button>
        </div>
      </div>
    </div>
  </div>
</div>

script:

$(document).ready(function(){

  loadGallery(true, 'a.thumbnail');

  //This function disables buttons when needed
  function disableButtons(counter_max, counter_current){
    $('#show-previous-image, #show-next-image').show();
    if(counter_max == counter_current){
      $('#show-next-image').hide();
    } else if (counter_current == 1){
      $('#show-previous-image').hide();
    }
  }
  function loadGallery(setIDs, setClickAttr){
    var current_image,
        selector,
        counter = 0;

    $('#show-next-image, #show-previous-image').click(function(){
      if($(this).attr('id') == 'show-previous-image'){
        current_image--;
      } else {
        current_image++;
      }

      selector = $('[data-image-id="' + current_image + '"]');
      updateGallery(selector);
    });

    function updateGallery(selector) {
      var $sel = selector;
      current_image = $sel.data('image-id');
      $('#image-gallery-caption').text($sel.data('caption'));
      $('#image-gallery-title').text($sel.data('title'));
      $('#image-gallery-image').attr('src', $sel.data('image'));
      disableButtons(counter, $sel.data('image-id'));
    }

    if(setIDs == true){
      $('[data-image-id]').each(function(){
        counter++;
        $(this).attr('data-image-id',counter);
      });
    }
    $(setClickAttr).on('click',function(){
      updateGallery($(this));
    });
  }
});

Answer 1

Guess you have commented out the output?

<?php 
  $w = 0;
  for ($i = 0; $i < count($newGambar); $i++) {
    if ($w % 4 == 0){
    $banyak++;
  }
  $w++;
  echo $banyak;
?>

Answer 2

it is because of z-index value.inspect the web page.heck the z-index of carousel.Most developers put the -9999px and 9999px values or similar in their code.

Adjust your z-index values so that modal box and it's container comes on top of carousel.

bootstrap modal css is inside bootstrap.css