模态窗口触发异常求助：多按钮均唤起同一Modal

Hey there, I see exactly what's going on here—let's break this down and fix it quickly.

The Core Issue #

Every single one of your trigger buttons uses data-target=".bs-example-modal-lg", and all your modals also share that same bs-example-modal-lg class. When Bootstrap looks for the modal to open, it grabs the first element that matches the selector you gave it. That's why no matter which button you click, you always get the Rockefeller Capital modal.

You mentioned trying to modify DIV IDs, but from your code, you never actually mapped those IDs to the buttons' data-target attributes—you kept using the shared class instead. That's the missing piece!

Step-by-Step Fix #

1. Assign unique IDs to each modal: Replace the shared bs-example-modal-lg class on each modal with a unique ID (like modal-rockefeller, modal-kingmelvin, modal-morganstanley). You can keep the modal-lg class on the dialog wrapper if you want all modals to stay large.
2. Update each button's data-target: Point each button to its corresponding modal's ID (using the # prefix, since IDs are targeted with CSS ID selectors).
3. Fix accessibility attributes: Make sure each modal's aria-labelledby matches the ID of its own modal title—this keeps your site accessible for screen readers.

Modified Working Code #

<!-- ==================================================================== -->
<article class="portfolio-item pf-uielements pf-media">
  <div class="portfolio-desc">
    <button class="btn btn-primary" data-toggle="modal" data-target="#modal-rockefeller">
      <img src="assets/img/mobile.png" alt="Rockefeller Capital Management">Rockefeller Capital<span>Mobile </span></button>
  </div>
  <!-- Modal - start ================= -->
  <div class="modal fade" id="modal-rockefeller" tabindex="-1" role="dialog" aria-labelledby="rockefeller-modal-title" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-body">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="rockefeller-modal-title">Rockefeller Capital • Mobile Application</h4>
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          </div>
          <div class="modal-body">
            <!-- Portfolio Single Gallery ============================================= -->
            <div class="col_full portfolio-single-image">
              <div class="fslider" data-arrows="true" data-animation="slide">
                <div class="flexslider">
                  <div class="slider-wrap">
                    <div class="slide"><a href="#"><img src="assets/img/rcm/RCG_contact.jpg" alt=""></a></div>
                    <div class="slide"><a href="#"><img src="assets/img/rcm/Dashboard-alt_Dark-Theme.jpg" alt=""></a></div>
                    <div class="slide"><a href="#"><img src="assets/img/rcm/Dashboard-alt_iteration-3.jpg" alt=""></a></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- .portfolio-single-image end -->
          <div class="col_one_third nobottommargin">
            <!-- Portfolio Single - Meta ============================================= -->
            <div class="card events-meta">
              <div class="card-body">
                <ul class="portfolio-meta nobottommargin">
                  <li><span><i class="icon-user"></i>Created by:</span> James Smith</li>
                  <li><span><i class="icon-lightbulb"></i>Skills:</span> Sketch • Invision • Illustrator</li>
                  <li><span><i class="icon-link"></i>Client:</span> <a href="https://rcm.rockco.com/">Rockefeller Capital Management</a></li>
                </ul>
              </div>
            </div>
            <!-- Portfolio Single - Meta End -->
          </div>
          <!-- Portfolio Single Content ============================================= -->
          <div class="col_two_third portfolio-single-content col_last nobottommargin">
            <!-- Portfolio Single - Description ============================================= -->
            <div class="fancy-title title-dotted-border">
              <h2>Project Brief</h2>
            </div>
            <div class="col_half nobottommargin">
              <p>A mobile application designed to provide their customers the same functioanlity of the website regradless of their location can perform the saame various financial operations they are accustomed to via their cell phone or tablet.</p>
            </div>
            <div class="col_half col_last nobottommargin">
              <p>When creating the mobile app the research we conducted was distilled into the two most important qualities that they (users) wanted, security and simplicity. From this a list of best practices for developers and users was generated focused on reducing or completely eliminating potential safety risks and I crafted this into a social media strategy.</p>
            </div>
            <!-- Portfolio Single - Description End -->
          </div>
          <!-- .portfolio-single-content end -->
        </div>
      </div>
    </div>
  </div>
  <!-- Modal - end ================= -->
</article>
<!-- ==================================================================== -->
<article class="portfolio-item pf-uielements pf-media">
  <div class="portfolio-desc">
    <button class="btn btn-primary" data-toggle="modal" data-target="#modal-kingmelvin">
      <img src="assets/img/mobile.png" alt="King Melvin">King Melvin<span>Mobile</span></button>
  </div>
  <!-- Modal - start ================= -->
  <div class="modal fade" id="modal-kingmelvin" tabindex="-1" role="dialog" aria-labelledby="kingmelvin-modal-title" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-body">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="kingmelvin-modal-title">King Melvin • Mobile Application</h4>
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          </div>
          <div class="modal-body">
            <!-- Portfolio Single Gallery ============================================= -->
            <div class="col_full portfolio-single-image">
              <div class="fslider" data-arrows="true" data-animation="slide">
                <div class="flexslider">
                  <div class="slider-wrap">
                    <div class="slide"><a href="#"><img src="assets/img/km/KM_S_1.png" alt=""></a></div>
                    <div class="slide"><a href="#"><img src="assets/img/km/KM_S_2.png" alt=""></a></div>
                    <div class="slide"><a href="#"><img src="assets/img/km/KM_S_3.png" alt=""></a></div>
                    <div class="slide"><a href="#"><img src="assets/img/km/KM_S_4.png" alt=""></a></div>
                    <div class="slide"><a href="#"><img src="assets/img/km/KM_S_5.png" alt=""></a></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- .portfolio-single-image end -->
          <div class="col_one_third nobottommargin">
            <!-- Portfolio Single - Meta ============================================= -->
            <div class="card events-meta">
              <div class="card-body">
                <ul class="portfolio-meta nobottommargin">
                  <li><span><i class="icon-user"></i>Created by:</span> James Smith</li>
                  <li><span><i class="icon-lightbulb"></i>Skills:</span> Adobe XD • Photoshop • Illustrator</li>
                  <li><span><i class="icon-link"></i>Client:</span> <a href="https://King Melvin.com/">King Melvin</a></li>
                </ul>
              </div>
            </div>
            <!-- Portfolio Single - Meta End -->
          </div>
          <!-- Portfolio Single Content ============================================= -->
          <div class="col_two_third portfolio-single-content col_last nobottommargin">
            <!-- Portfolio Single - Description ============================================= -->
            <div class="fancy-title title-dotted-border">
              <h2>Project Brief</h2>
            </div>
            <div class="col_half nobottommargin">
              <p>King Melvin is your evening companion that always knows where to go and consistently makes the best suggestions the liven up the mood and give you the best offers the night has out there for you and your group of friends.</p>
            </div>
            <div class="col_half col_last nobottommargin">
              <p>From commissioned research these identified 4 industries are traditionally associated with weekend festivities limited in their access to traditional marketing channels. This aggregate portal will provide a direct pipeline to their customers.</p>
            </div>
            <!-- Portfolio Single - Description End -->
          </div>
          <!-- .portfolio-single-content end -->
        </div>
      </div>
    </div>
  </div>
  <!-- Modal - end ================= -->
</article>
<!-- ==================================================================== -->
<article class="portfolio-item pf-uielements pf-media">
  <div class="portfolio-desc">
    <button class="btn btn-primary" data-toggle="modal" data-target="#modal-morganstanley">
      <img src="assets/img/video.png" alt="Morgan Stanley">Morgan Stanley<span>Video </span></button>
  </div>
  <!-- Modal - start ================= -->
  <div class="modal fade" id="modal-morganstanley" tabindex="-1" role="dialog" aria-labelledby="morganstanley-modal-title" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-body">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="morganstanley-modal-title">Morgan Stanley • Global Creative Services Promo</h4>
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          </div>
          <div class="modal-body">
            <!-- Portfolio Single Gallery ============================================= -->
            <div class="col_full portfolio-single-image">
              <div class="center clearfix" style="padding: 50px;">
                <iframe src="https://player.vimeo.com/video/139208268?badge=0" width="500" height="210" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
              </div>
            </div>
          </div>
          <!-- .portfolio-single-image end -->
          <div class="col_one_third nobottommargin">
            <!-- Portfolio Single - Meta ============================================= -->
            <div class="card events-meta">
              <div class="card-body">
                <ul class="portfolio-meta nobottommargin">
                  <li><span><i class="icon-user"></i>Created by:</span> James Smith</li>
                  <li><span><i class="icon-lightbulb"></i>Skills:</span> Sketch • Invision • Illustrator</li>
                  <li><span><i class="icon-link"></i>Client:</span> <a href="https://rcm.rockco.com/">Rockefeller Capital Management</a></li>
                </ul>
              </div>
            </div>
            <!-- Portfolio Single - Meta End -->
          </div>
          <!-- Portfolio Single Content ============================================= -->
          <div class="col_two_third portfolio-single-content col_last nobottommargin">
            <!-- Portfolio Single - Description ============================================= -->
            <div class="fancy-title title-dotted-border">
              <h2>Project Brief</h2>
            </div>
            <div class="col_half nobottommargin">
              <p>ZZZ.</p>
            </div>
            <div class="col_half col_last nobottommargin">
              <p>zzz.</p>
            </div>
            <!-- Portfolio Single - Description End -->
          </div>
          <!-- .portfolio-single-content end -->
        </div>
      </div>
    </div>
  </div>
  <!-- Modal - end ================= -->
</article>

Quick Notes #

• I kept the modal-lg class on each .modal-dialog so all your modals stay the large size you want—no layout changes needed.
• Each modal's aria-labelledby now links to its own title ID, which is important for accessibility.
• Always make sure HTML IDs are unique—this is a basic rule that prevents weird behavior like what you ran into.

As a thank you for solving this, I’m happy to offer my graphic design services—just reach out if you need help with anything!

内容的提问来源于stack exchange，提问作者James Smith