Question 332244 in Html Question posted in
Some basic documentation can be found here.

Html – 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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>

  2. 0

    Try this below

    In your search form

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

    the most important thing is the class="modal" and the id of the modal id="exampleModal" , you target the model in the input field using data-bs-toggle="modal" data-bs-target="#exampleModal" classes inside the search form

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search