在 Bootstrap modal 内的图像中添加 maphilight

Posted 2023-05-09

【中文标题】在 Bootstrap modal 内的图像中添加 maphilight

【英文标题】：Add maphilight in image inside Bootstrap modal

【发布时间】：2017-01-26 03:27:37

【问题描述】：

我有一张需要映射的 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"    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- 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 声望。

【参考方案1】：

style="position:absolute;"

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

【讨论】：

你在哪里抹掉的？

【参考方案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);
);

【讨论】：

虽然此代码可以解决 OP 的问题，但最好包含关于您的代码如何解决 OP 问题的说明。这样，未来的访问者可以从您的帖子中学习，并将其应用到他们自己的代码中。 SO 不是编码服务，而是知识资源。此外，高质量、完整的答案更有可能获得支持。这些功能，以及所有帖子都是独立的要求，是 SO 作为一个平台的一些优势，使其与论坛区分开来。您可以编辑以添加其他信息和/或使用源文档补充您的解释。