html - 无法在模态上关闭模态

问题描述

我有 2 个模态框（当我按下小狗图像时会打开第二个模态框）

我的问题是，一旦我打开第二个，我就不能再关闭它们了，只是打开和关闭第一个就没有任何问题。

这是我的代码：

<div class="modal hide fade" id="moreModal<?php echo $row["dog_id"]; ?>" tabindex="-1" data-focus-on="input:first">
                  <div class="modal-dialog  modal-lg" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="moreModalLabel"><?php echo $row["dog_name"]; ?></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <b>Name:</b> <?php echo $row["dog_name"]; ?> <br>
                        <b>Born:</b> <?php echo $row["born_date"]; ?> <br>
                        <b>Height:</b> <?php echo $row["height"]; ?> <br>
                        <b>Weight:</b> <?php echo $row["weight"]; ?> <br>
                        <b>Castration:</b> <?php echo $row["castration"]; ?> <br>
                        <b>Description:</b> <?php echo $row["dog_desc"]; ?> <br>
                      </div>
                      <div class="container">
                          <div class="row mx-2">
                            <div class="col-2 my-2">
                                <img class="gallery_image" id="myImg" width="100%" height="90" style="object-fit: cover;" data-toggle="modal" href="#img_modal_large" src="<?php echo $row["image_dog"]; ?>" alt="">
                            </div>
                          </div>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                      </div>
                    </div>
                  </div>

                </div>
                <div id="img_modal_large" class="modal hide fade" tabindex="-1" data-focus-on="input:first">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                      </div>
                     <div class="modal-body">
                      <img src="<?php echo $row["image_dog"]; ?>" alt="">
                     </div>
                     <div class="modal-footer">
                      <button type="button" data-dismiss="modal" class="btn">Close</button>
                    </div>
                </div>
            <?php }; ?>

标签： htmlmodal-dialog

html - 无法在模态上关闭模态

问题描述

解决方案

推荐阅读