无法在模态上关闭模态

时间:2018-12-10 14:32:04

标签: html modal-dialog

我有两个模态(第二个模态是在按小狗图像时打开的

我的问题是,一旦打开第二个,我就无法再将其关闭,只是打开和关闭第一个就可以了,没有问题。

how it looks like when i open it

这是我的代码:

<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 }; ?>

1 个答案:

答案 0 :(得分:0)

所以我现在设法解决了我的问题...

我刚刚做了:z-index:2147483647!important;