旋转木马模式内不工作

Question

好日子，我试图在carousel中创建简单的图像幻灯片。但我面临一个问题，当我尝试在模态内添加此旋转木马。这里是我的脚本

<div id="modalphoto" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
      <div class="modal-body"> 
      <div id="carousel-example-generic" class="carousel slide"> 
        <div class="carousel-inner"> 

        </div> 

      </div> 
      </div> 
    </div> 

触发显示模式

<?php if(isset($photo)){ ?> 
      <?php foreach($photo as $foto) { ?> 
        <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
         <a class="thumbnail"> 
          <p align="center">Item : (<?=$foto->ItemCode;?>) <br> 
           <?=$foto->ItemName;?> 
           <input type="hidden" class="itemcodes" value="<?=$foto->ItemCode;?>"> 
          </p> 
         </a> 
        </div> 
     <?php } } ?> 

，然后我的JavaScript。

$(document).on("click",".thumb",function(){ 
      $('.carousel-inner').html(""); 
      var Items = $(this).find('input:hidden').val(); 
       $.ajax({ 
        data : {Items:Items}, 
        url : '<?=base_url();?>Item/getphoto', 
        type:'POST', 
        datatype:'JSON', 
        success:function(data){ 
          data = $.parseJSON(data); 
         $.each(data, function(k , v) { 
          $(".carousel-inner").append('<div class="item">'+ 
                 '<img class="img-responsive" src="./assets/file_upload/md/'+v.PhotoName+'" style="width:100%">'+ 
                 '<div class="carousel-caption">'+v.ItemName+'</div></div>' 
                 ) 

         }); 
         $("#modalphoto").modal("show"); 

        } 
       }); 
     }); 

问题是当我点击.thumb我的屏幕变黑。这是截图。

我怎样才能解决这个问题？

对不起我的英语不好。我的小提琴https://jsfiddle.net/00113e4g/4/

Answer 1

你的旋转木马内部碎片的结构是错误的。

更改它，使得每个元件可以是这样的：

<div class="item"> 
    <img class="img-responsive" src="http://placehold.it/365" 
     style="width: 100%; height: auto"> 
    <div class="carousel-caption">acts_as_money</div> 
</div> 

此外，第一元件所需要的活性类。

的片段：

$(document).ready(function() { 
 

 
    var data = [{ 
 
     "ItemCode": "ANK160500191", 
 
     "PhotoName": "1.png", 
 
     "PhotoFlag": 1 
 
    }, 
 
     { 
 
      "ItemCode": "ANK160500191", 
 
      "PhotoName": "BTY2.png", 
 
      "PhotoFlag": 1 
 
     }, { 
 
      "ItemCode": "ANK160500191", 
 
      "PhotoName": "fffff.png", 
 
      "PhotoFlag": 1 
 
     }, { 
 
      "ItemCode": "ANK160500191", 
 
      "PhotoName": "result.png", 
 
      "PhotoFlag": 1 
 
     }, { 
 
      "ItemCode": "ANK160500191", 
 
      "PhotoName": "SKSM2.png", 
 
      "PhotoFlag": 1 
 
     }]; 
 

 

 
    $(document).on("click", ".thumb", function() { 
 
     $('.carousel-inner').html(""); 
 
     var Items = $(this).find('input:hidden').val(); 
 
     $.ajax({ 
 
      url: "https://api.github.com/repositories?since=364", 
 
      data: { 
 
       Items: Items 
 
      }, 
 
      type: 'GET', 
 
      datatype: 'JSON', 
 
      success: function(data) { 
 
       //data = $.parseJSON(data); 
 
       $.each(data.slice(0,3), function(k, v) { 
 
        var act = (k == 0) ? 'active' : ''; 
 
        $(".carousel-inner").append('<div class="item ' + act + '">' + 
 
          '<img class="img-responsive" src="http://placehold.it/'+v.id+'" style="width: 100%; height: auto">' + 
 
          '<div class="carousel-caption">' + v.name + '</div></div>' 
 
        ) 
 

 
       }); 
 
       $("#modalphoto").modal("show"); 
 

 
      } 
 
     }); 
 
    }); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div id="modalphoto" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
 
    <div class="modal-body"> 
 
     <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
      <!-- Wrapper for slides --> 
 
      <div class="carousel-inner" role="listbox"> 
 
       <div class="item active"> 
 
        <img src="http://placehold.it/450x350" alt="Slide 1"> 
 
        <div class="carousel-caption"> 
 
         Caption Slide 1 
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <img src="http://placehold.it/450x350" alt="Slide 2"> 
 
        <div class="carousel-caption"> 
 
         Caption Slide 2 
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <img src="http://placehold.it/450x350" alt="Slide 3"> 
 
        <div class="carousel-caption"> 
 
         Caption Slide 3 
 
        </div> 
 
       </div> 
 
      </div> 
 

 
      <!-- Controls --> 
 
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
       <span class="sr-only">Previous</span> 
 
      </a> 
 
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
       <span class="sr-only">Next</span> 
 
      </a> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div class="box-body table-responsive"> 
 
    <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
 
     <a class="thumbnail"> 
 
      <p align="center">Item : (0019177) <br> 
 
       SANDAL 6170-23 BROWN <input type="hidden" class="itemcodes" value="0019177"> 
 
      </p> 
 
     </a> 
 
    </div> 
 
    <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
 
     <a class="thumbnail"> 
 
      <p align="center">Item : (ANK160500191) <br> 
 
       NECKLACE <input type="hidden" class="itemcodes" value="ANK160500191"> 
 
      </p> 
 
     </a> 
 
    </div> 
 
</div>

Answer 2

您可以参考this link。

它有你需要的所有答案。它甚至展示了如何动态显示模态。甚至没有编码任何东西，只是调用函数，你怎么显示一个模式也显示在这里。