Bootstrap动态模态框多变量传值异常求助

Hey Jason, let's break down those tiny, easy-to-miss mistakes that are keeping your modal from showing dynamic content—you're so close to getting this working!

Key Issues & Fixes #

1. Modal ID Mismatch (The Big One!) #

Your trigger elements are pointing to #Engine1Modal via data-target, but your JavaScript is listening for the show.bs.modal event on #Engine2Modal, and your modal itself has the ID #Engine2Modal. These IDs need to match up for the trigger to connect with the modal and its script.

Fix: Update the data-target on your trigger elements to match the modal's ID:

<div class="row"> 
  <?php $option=array_column($options, 'name', 'id');?> 
  <div class="col-5 col-md-6 col-lg-2 clickable" data-toggle="modal" data-target="#Engine2Modal" data-thing1="<?php echo $option[$vesseldata['Engine1Type']];?>" data-thing2="<?php echo $vesseldata['Engine1Number'];?>" title="Update Engine 1">Engine 1</div> 
  <div class="col-7 col-md-6 col-lg-4"> 
    <a href="#" data-toggle="modal" data-target="#Engine2Modal" data-thing1="<?php echo $option[$vesseldata['Engine1Type']];?>" data-thing2="<?php echo $vesseldata['Engine1Number'];?>" title="Update Engine 1"> 
      <?php echo $option[$vesseldata['Engine1Type']];?> 
    </a> 
  </div> 
  <div class="col-5 col-md-6 col-lg-2">Engine 1 Serial</div>
  <div class="col-7 col-md-6 col-lg-4"><?php echo $vesseldata['Engine1Number'];?></div> 
</div>

2. Using .text() for HTML-Formatted Content #

You're trying to add a <br> line break to the modal title, but using .text() will render that tag as plain text instead of parsing it as HTML. Switch to .html() to properly display the line break:

Fix: Update your JavaScript code:

<script> 
$('#Engine2Modal').on('show.bs.modal', function (event) { 
  var trigger = $(event.relatedTarget); 
  var thing1 = trigger.data('thing1'); 
  var thing2 = trigger.data('thing2'); 
  
  var modal = $(this); 
  // Use .html() instead of .text() to render the <br> tag
  modal.find('.modal-title').html(thing1 + '<br>Serial # ' + thing2); 
}); 
</script>

3. Quick Sanity Check #

Just to be thorough: make sure your jQuery library is loaded before your modal script, and that Bootstrap's JS is included as well (since the modal relies on it). Without these, the modal won't function at all.

Final Notes #

Once you apply these two main fixes, your modal should correctly pull the data-thing1 and data-thing2 values from the trigger element and display them in the title with a proper line break. It's totally normal to overlook ID mismatches when you're juggling multiple code blocks—we've all been there!

内容的提问来源于stack exchange，提问作者Jason Ellmers