CODEWITHSUNDEEP
javascripthtmlcssbootstrap-modal
tenebris silentio
tenebris silentio

Reputation: 519

HTML CSS Boxes - Issue with Bootstrap Modal to trigger on clicking inside of box

my code is a mess and I know it. I really just need some help.

I have a series of two codes for which people will want definitions. When someone hovers over Code 1 and Code 2, it turns dark blue. That part works fine. I want a Bootstrap Modal to pop up when someone clicks on the "block" or within the <article> and </article> tags. This would be easy with a button, but my users don't want a button. I'm lost here and I've looked through various forums, codepens, etc and just haven't found the solution. I know what I have here is messy, but I'm here to clean it up and get this resolved. Thank you in advance.

<main>
  <article><b>Code 1</b><br><br>
    <div class="wrap">
      <a href="#" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-new">
    </div>

    <div class="modal fade bs-example-modal-new" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <div class="body-message">
            <h4>Code 1 Title</h4>
              <p>Code 1 Definition
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
          </div>
        </div>

      </div>
    </div>
</a>
  </article>

  <article><b>Code 2</b><br>

    <div class="wrap">

      <a href="#" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-new">
    </div>
    <div class="modal fade bs-example-modal-new" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">

          <div class="modal-body">
            <div class="body-message">
            <h4>Code 2 Title</h4>
              <p>Code 2 Definition
            </div>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
          </div>
        </div>

      </div>
    </div>
</a>
  </article>
</main>

<style>

* {
  box-sizing: border-box;
}
main {
  max-width: 1100px;
  margin: 15px auto;
  padding: 0 15px;
  width: 100%;
  display: grid;
  /* Define Auto Row size */
  grid-auto-rows: 215px;
  /*Define our columns */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 1em;
}

article {
  border-radius: 10px;
  padding: 10px;
  color: #fff;
  background-color: #55BBE9
  }

article:hover {
    background-color: #1B2631;
  }
  
modal-body {background-color: #55BBE9
}
</style>

Upvotes: 0

Views: 36

Answers (1)

Francisco A. Cerda
Francisco A. Cerda

Reputation: 124

Add data-toggle="modal" data-trigger="click" data-target=".bs-example-modal-new" to the <article> tags.

Example here

Upvotes: 1

Related Questions