Search code examples
htmlcssbootstrap-4bootstrap-modal

How can I open a Bootstrap modal when an input is clicked?

I'm working with Bootstrap and I have a search form and a modal. I want my model to open up when I click on the search form. The modals I found online were only working with a button but I don't want my model to open up with a button. Is there a way to make my modal work with input form?

I looked here: https://getbootstrap.com/docs/4.0/components/modal/

enter image description here

My search form code:

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

  • The code that worked for me:

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

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