0
我有一張7446x1800圖像，需要映射。我使用maphilight jQuery插件來實現這一點。我能夠使其工作（請參閱here），但我想實現的是使其在Bootstrap模式下工作。我猜測它與z-index有關，但我無法使它工作。在圖像中添加maphilight Bootstrap模式
當用戶點擊較小版本的圖像時，會彈出一個引導模式，他/她可以查看整個圖像並選擇一個「lot」進行預約。不同的顏色用於指示批次是否已被佔用，保留或仍然可用。
這裏是我的全部代碼：
<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">×</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">×</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>
或者，如果這是不可能的，是否有任何其他的方式來實現呢？
任何幫助，高度讚賞。
P.S.我不能標記「maphilight」插件，因爲它說它需要1500點聲望。