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。

它有你需要的所有答案。它甚至可以显示如何动态显示模态。如果没有编码任何东西，只需要调用函数，那么如何显示模态也会显示在这里。

模态内的旋转木马不起作用

2 个答案: