html - 具有多个图像的 Bootstrap 模态

Question

我有不同相册中的图片。当我点击专辑封面图片时，我必须在模态中看到专辑的第一张图片，然后按下旁边的按钮才能看到下一张图片。

问题是，当我点击封面图片时，我看到了相册中的所有图片(在我的例子中是两张图片，一张在另一张下面)。我像这样从 get_images.php 文件中获取图像:

if($result->num_rows > 0){                  
    while($row = $result->fetch_assoc()){
        $i = 'images/'.$row['GalleryName']; 
        $img .= "<img src='$i' class='img-responsive' alt=''/>";

    }
}

我的索引页中的代码是:

<div class="modal fade bd-example-modal-lg" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-body">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                    <span class="glyphicon glyphicon-remove"></span>
                    </button>
                </div>
                <div class="row" id="dynamic-content">
                    <img src="img-responsive" alt=""/>
                </div>
            </div>
       </div>
   </div>
</div> 

获取图片并检索它们的脚本是这样的:

function getImages(album_id) {

    $.getJSON('get_images.php?album_id=' + album_id,function(data)
        {
             $('#dynamic-content img').html(data.img);
             $('#myModal').modal('show');
        });
}

This is how I see modal!

有什么问题 - CSS、HTML、Javascript 还是全部？

Answer 1

看来你需要 read the Bootstrap 4 docs .

您的代码中需要进行多项修复。图像类应该是 img-fluid，而不是 img-responsive。 modal-body 应该在 modal-content 中。 img 应该在 modal-body 中。您应该只将 row 与网格列 (col-*) 一起使用。 Bootstrap 4 中没有字形图标。

https://www.codeply.com/go/rvvjHtENYT

<div class="modal bd-example-modal-lg" id="myModal" role="dialog">
    <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="dynamic-content">
                    <img src="..." class="img-fluid" alt=""/>
                </div>
            </div>
       </div>
</div> 

如果你想在 modal-body 中包含多个图像，结构应该是这样的..

<div class="modal-body" id="dynamic-content">
      <div class="row">
            <div class="col"><img src=".." class="img-fluid" alt=""/></div>
            <div class="col"><img src=".." class="img-fluid" alt=""/></div>
            <div class="col"><img src=".." class="img-fluid" alt=""/></div>
      </div>
</div>