如何在单击输入时打开 Bootstrap 模式？

Question

我正在使用 Bootstrap，我有一个搜索表单和一个模式。我希望当我单击搜索表单时打开我的模型。我在网上找到的模态仅适用于按钮，但我不希望我的模型使用按钮打开。有没有办法让我的模态与输入表单一起工作？

我看这里：https://getbootstrap.com/docs/5.0/components/modal/

我的搜索表单代码：

        <div class="input-box">
          <input type="text" class="form-control">
          <i class="fa fa-search"></i>
        </div>

解决方案

            <div class="input-box">
              <input type="text" class="form-control" data-toggle="modal" data-target="#myModal">
              <i class="fa fa-search"></i>

              <!-- Modal -->

Answer 1

试试下面这个

在您的搜索表单中

<div class="input-box" data-bs-toggle="modal" data-bs-target="#exampleModal">
          <input type="text" class="form-control">
          <i class="fa fa-search"></i>
        </div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

<h1> my sample modal content</h1>
  
</div>

最重要的是

class="modal"

和模态的 id

id="exampleModal"

，您可以使用

data-bs-toggle="modal" data-bs-target="#exampleModal"

 中的 

search form

类在输入字段中定位模型