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中没有glyphicons。

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>

Answer 2

This is the result after my last changes

在get_images.php中的

我把它改为返回（我的情况下我有两个div）：

    <div class='col'><img src='$i' class='img-fluid' alt=''/></div>

在html中我有：

    <div class="modal-body">
         <div class="row" id="dynamic-content">

         </div>
    </div>

内部的结果是js：

      $.get('get_images.php?album_id=' + album_id,function(data)
      {

          $('#dynamic-content').html(data);
          $('#myModal').modal('show');
      });

我无法理解为什么会这样？

具有多个图像的Bootstrap模态

2 个答案: