时间戳

首页 > 解决方案 > HTML CSS 框 - 在框内单击时触发引导模式的问题

javascript - HTML CSS 框 - 在框内单击时触发引导模式的问题

问题描述

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

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

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

标签： javascripthtmlcssbootstrap-modal

解决方案

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

这里的例子

推荐阅读