Bootstrap Modal 不会出现 (ID)

Question

I have a page with 6 clickable buttons that each open up a different modal. I have 4 working ones that open their corresponding modal when clicked, however, all of them after the 4th do not work. The modal works if I assign the ID of an existing modal to the broken modals, however, if I change ONLY the ID from portfolioModal4 to portfolioModal5, it doesn't work.

Below is the code for the modal followed by the code for the button that, when pressed, should open the modal.

 <!-- Modal 5-->
 <div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="close-modal" data-dismiss="modal"><img src="img/close-icon.svg" alt="Close modal" /></div>
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-lg-8">
                                <div class="modal-body">
                                    <!-- Project Details Go Here-->
                                     <h2 class="text-uppercase">Readiness Center Dedication</h2>
                                    <p class="item-intro text-muted">4 Photos</p>
                                    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                                      <div class="carousel-inner" role="listbox">
                                        <div class="carousel-item active">
                                          <img class="d-block w-100" src="img/chi1.jpeg" alt="First slide">
                                          <div class="carousel-caption d-none d-md-block">
                                            <div class="align-bottom">
                                              <p>Dedication Language</p>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="carousel-item">
                                          <img class="d-block w-100" src="img/chi1.jpeg" alt="Second slide">
                                          <div class="carousel-caption d-none d-md-block">
                                            <div class="align-bottom">
                                              <p>Candy Mason at Renaming</p>
                                            </div>
                                          </div>

 <section class="page-section bg-light" id="portfolio">
            <div class="container">
                <div class="text-center">
                    <h2 class="section-heading text-uppercase">Photos</h2>
                    <h3 class="section-subheading text-muted"></h3>
                </div>
                <div class="row">
                    <div class="col-lg-4 col-sm-6 mb-4">
                        <div class="portfolio-item">
                            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal5">
                                <div class="portfolio-hover">
                                    <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
                                </div>
                                <img class="img-fluid" src="img/michigan.jpg" alt="" />
                            </a>
                            <div class="portfolio-caption">
                                <div class="portfolio-caption-heading">2019 Michigan Tailgate vs. Army</div>
                                <div class="portfolio-caption-subheading text-muted">6 Photos</div>
                            </div>
                        </div>
                    </div>

Answer 1

Is there a reason you're using an anchor tag instead of a button to trigger your modal? In the Bootstrap docs , it looks like they use a button element with a data-target attribute. Can you try that instead and see if it works? Using what they have in the docs may be more screen-reader friendly too.

Answer 2

Seems like the part of the modal HTML is not having complete closing tags

Here you are a fixed HTML modal:

<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="close-modal" data-dismiss="modal"><img src="img/close-icon.svg" alt="Close modal" /></div>
         <div class="container">
            <div class="row justify-content-center">
               <div class="col-lg-8">
                  <div class="modal-body">
                     <!-- Project Details Go Here-->
                     <h2 class="text-uppercase">Readiness Center Dedication</h2>
                     <p class="item-intro text-muted">4 Photos</p>
                     <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner" role="listbox">
                           <div class="carousel-item active">
                              <img class="d-block w-100" src="img/chi1.jpeg" alt="First slide">
                              <div class="carousel-caption d-none d-md-block">
                                 <div class="align-bottom">
                                    <p>Dedication Language</p>
                                 </div>
                              </div>
                           </div>
                           <div class="carousel-item">
                              <img class="d-block w-100" src="img/chi1.jpeg" alt="Second slide">
                              <div class="carousel-caption d-none d-md-block">
                                 <div class="align-bottom">
                                    <p>Candy Mason at Renaming</p>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

I hope this would work for you