CODEWITHSUNDEEP
htmltwitter-bootstrap
DigitalArchitect
DigitalArchitect

Reputation: 39

Only one bootstrap modal works

I have worked with Bootstrap quite a bit but, I can't figure out why my modals wont work on my portfolio website except for my first portfolio piece. The data-targets and id's match up.

    <a href="#lax-it" class="portfolio-link" data-toggle="modal" data-target="#lax-it">

    <!-- Laxadazikal -->
    <div class="modal fade bs-example-modal-lg" id="lax-it" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content" style="padding:5px;">
          <h2 class="text-center">Laxidazikal</h2>
          <div class="row">
          <div class="col-md-10 col-md-offset-1">
            <hr>
            <p>Laxidazikal is a website for a lacrosse company. It is an ecommerce website as well as a business portfolio website. Kitchel needed an ecommerce store as well as training information and we loved the turn out. <br> <br> You can visit the website by clicking <a href="https://conneraiken.com/lax">here.</a></p>    
          </div>
          <div class="col-md-4" style="margin-left:37%;">
            <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project </button>
          </div>
        </div>
      </div>
    </div>
  </div>

Upvotes: 1

Views: 798

Answers (1)

alex
alex

Reputation: 7433

Your <a> tag isn't closed. If you close it, it should work.

<a href="#lax-it" class="portfolio-link" data-toggle="modal" data-target="#lax-it">Click me to open up a modal dialog!</a>

In the future, you'd ought to consider using the W3C Markup Validation Service tool to check for these HTML problems.

Here's a JSFiddle.

Upvotes: 2

Related Questions