在 Bootstrap modal 内的图像中添加 maphilight

Question

我有一张需要映射的 7446x1800 图像。我使用 maphilight jQuery 插件来实现这一点。我能够让它工作（见here），但我想要实现的是让它在引导模式中工作。我猜它与 z-index 有关，但我无法使其工作。

这个过程是，当用户点击图像的较小版本时，会弹出一个引导模式，他/她可以在其中查看整个图像并选择一个“批次”进行预订。不同的颜色用于指示批次是否已被占用、保留或仍然可用。

这是我的全部代码：

<style type="text/css">
  .modal.modal-wide .modal-dialog {
    width: 90%;
  }
  .modal-wide .modal-body {
    overflow-y: auto;
  }
  #tallModal .modal-body p { margin-bottom: 900px }
</style>

<div class="row">
<div class="zoomTarget" data-debug="true">
    <img src ="../../assets/images/uploads/map-1.png" alt="map 1" width="755px" height="200px" data-toggle="modal" data-target="#showmapModal-1">
    <div class="modal modal-wide fade" id="showmapModal-1" tabindex="-1" role="dialog" aria-labelledby="showmapModal-1">
    <div class="modal-dialog" role="document">
           <div class="modal-content">
                  <div class="modal-header">
                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                         <h4 class="modal-title" id="showmapModal-1">Reserve Lot</h4>
                  </div>
                  <div class="modal-body">
                         <div id="veg_demo">
                            <img class="map" id="map-<?php echo $_GET['map']; ?>" src="../../assets/images/uploads/map-1.png" usemap="#map-1" >
                            <div style="clear:both; height:8px;"></div>
                            <div id="selections" style="clear:both;"></div>
                        </div>
                        <map pid="map-1" name="map-1">
                            <?php
                                $plot_map = SelectAll('pmp_lot_map');
                                if($plot_map){
                                    $counter = 1;
                                    if(mysqli_num_rows($plot_map) > 0) {
                                        while($row = mysqli_fetch_assoc($plot_map)) {
                                                $lot_map_uuid = $row['uuid'];
                                                $block_no = $row['block_no'];
                                                $lot_no = $row['lot_no'];
                                                $coordinates = $row['coords'];
                                                $lot_status = $row['status'];
                                                if($lot_status == 'available') {
                                                    $fillColor = '87D37C';
                                                    $message = "This lot is available. Do you really want to reserve this Block # ".$block_no.", Lot # ".$lot_no.".";
                                                } else if($lot_status == 'reserved') {
                                                    $fillColor = 'F4D03F';
                                                    $message = "This lot is already reserved.";
                                                } else if($lot_status == 'taken') {
                                                    $fillColor = '96281B';
                                                    $message = "This lot is not available.";
                                                }
                            ?>
                            <area data-toggle="modal" data-target="#mapModal_<?php echo $counter; ?>" data-maphilight='{"strokeColor":"000000","strokeWidth":3,"fillColor":"<?php echo $fillColor; ?>","fillOpacity":1}' href="#" shape="poly" coords="<?php echo $coordinates; ?>" data-alt="Block <?php echo $block_no; ?> Lot <?php echo $lost_no; ?>" data-title="Block <?php echo $block_no; ?> Lot <?php echo $lot_no; ?>">
                            <div class="modal fade" id="mapModal_<?php echo $counter; ?>" tabindex="-1" role="dialog" aria-labelledby="mapModalLabel-<?php echo $counter; ?>">
                                <div class="modal-dialog" role="document">
                                       <div class="modal-content">
                                              <div class="modal-header">
                                                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                     <h4 class="modal-title" id="mapModalLabel-<?php echo $counter; ?>">Reserve Lot</h4>
                                              </div>
                                              <div class="modal-body">
                                                     <p style="text-indent:0;">
                                                        <?php echo $message; ?>
                                                    </p>

                                              </div>
                                              <div class="modal-footer">
                                                     <?php if($lot_status == 'available') {?><button type="button" class="btn btn-success" onclick="saveMapModal('<?php echo $lot_map_uuid; ?>','mapModal_<?php echo $counter; ?>','<?php echo $uuid; ?>');">Continue</button><?php } ?>
                                                     <?php if($lot_status == 'available') {?><button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button><?php } ?>
                                                     <?php if($lot_status != 'available') {?><button type="button" class="btn btn-default" data-dismiss="modal">Ok</button><?php } ?>
                                              </div>
                                       </div>
                                </div>
                             </div>
                            <?php
                                            $counter++;
                                        }
                                    }
                                }
                            ?>
                        </map>

                  </div>
                  <div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>
           </div>
    </div>
 </div>
</div>

<script type="text/javascript">
$(document).ready(function () {
  $('.map').maphilight();
});
$(".modal-wide").on("show.bs.modal", function() {
    var height = $(window).height() - 100;
    $(this).find(".modal-body").css("max-height", height);
});
</script>

或者如果不可能，还有其他方法可以实现吗？

非常感谢任何帮助。

附：我不能标记“maphilight”插件，因为它说它需要有 1500 声望。

Answer 1

style="position:absolute;"

是罪魁祸首。当我在模态中使用 maphilight 时，我删除了它，一切似乎都正常！

Answer 2

解决了

//id or class where you click to activate the modal
$('.the_modal_click').on('click', function() {
  //after activating the modal, activate maphilight
  setTimeout(function () {
    $('.modal img').maphilight();
  }, 300);
});