HTML CSS 框 - Bootstrap 模态在框内单击时触发的问题

Question

我的代码一团糟，我知道。我真的只是需要一些帮助。

我有一系列的两个代码，人们会想要它们的定义。当有人将鼠标悬停在代码 1 和代码 2 上时，它会变成深蓝色。那部分工作正常。当有人点击“块”或 <article> 和 </article> 标签时，我希望弹出一个 Bootstrap 模式。使用按钮这很容易，但我的用户不想要按钮。我在这里迷路了，我浏览了各种论坛、代码笔等，只是没有找到解决方案。我知道我这里的东西很乱，但我是来清理它并解决这个问题的。提前谢谢你。

<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>

Answer 1

将 data-toggle="modal" data-trigger="click" data-target=".bs-example-modal-new" 添加到 <article> 标签。

示例here

HTML CSS 框 - Bootstrap 模态在框内单击时触发的问题

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

html

javascript

css

bootstrap-modal