具有多个图像的引导模式答案

【问题标题】：Bootstrap modal with multiple images具有多个图像的引导模式
【发布时间】：2018-02-07 23:41:12
【问题描述】：

我在不同的相册中有图片。当我点击专辑封面图片时，我必须以模态形式查看专辑的第一张图片，然后按下按钮查看下一张图片。

问题是当我点击封面图片时，我会看到相册中的所有图片（在我的情况下是两张图片，一张在另一张下方）。我从 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 或所有这些？

【问题讨论】：

什么版本的 Bootstrap？
引导程序版本 4。

标签： html css twitter-bootstrap image modal-dialog

【解决方案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>

【讨论】：

谢谢。这是一些不同代码的混合，变得有点混乱 :) 我将阅读更多关于为什么我在我的模态中有这两个图像而不仅仅是一个。

【解决方案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');
      });

我不明白为什么会这样？

【讨论】：