Is there a way to trigger a Bootstrap modal to open upon clicking on an input?

Currently using Bootstrap, I have a search form and a modal in my project. My goal is to have the modal open when clicking on the search form, rather than having it triggered by a button as most online resources suggest. Is there a way to achieve this functionality where the modal opens with an input form click?

My search through Bootstrap's documentation led me here: https://getbootstrap.com/docs/4.0/components/modal/

https://i.sstatic.net/WxOVx.png

Sample of my search form code:

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

Answer №1

Give this a try:

Add the following code snippet into 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> This is a sample modal content</h1>
  
</div>

The key elements to note are the class="modal" and the id of the modal id="exampleModal". You can trigger the modal from the input field in the search form by using the classes 

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

Answer №2

Here is the code snippet that solved my issue:

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for accessing font sizes through CSS code?

Why is the font size value in CSS returning incorrect values? Check out this jsFiddle example Here's the HTML code snippet: <div id="test">TEXT</div> <div id="test2">TEXT2</div> Now, take a look at the CSS: #test{ font ...

jquerycssfont-size

Struggling to extract information from the front-end by utilizing Node.js/Express with body-parser and encountering difficulties

Attempting to transfer data from the frontend to a node server utilizing body-parser Shown below is the frontend code: <body> <h1>Donate!</h1> <h2>Select A tier</h2> <label for="donate-tier-select">Suggested Sp ...

htmlnode.jsformsexpressbody-parser

Creating dynamic names for radio buttons in Bootstrap forms: A guide to generating unique identifiers

This is a continuation of the discussion in this post. To better understand the concept, refer to this JSfiddle example. Check out the final solution provided by @Scaramouche The challenge at hand involves dynamically generating unique names for radio b ...

jqueryvue.jsbootstrap-4

Ways to bypass HostListener in Angular 2

In the process of developing a page with animations triggered on scroll, I encountered the challenge of ensuring that the animations only occur when the corresponding element is visible on the viewport. Utilizing Angular2 for this task led me to investigat ...

javascripthtmlangulartypescriptangular2-template

How can I modify certain attributes within an array of objects?

https://i.sstatic.net/TKkcV.jpgI need help with updating properties within an object array. Below is my code for reference. I have an object array consisting of two arrays, where the first one contains attribute "first" and the second one contains "last". ...

javascriptcssarraysreactjsobject

Change the CSS dynamically

I'm curious about how to create a similar effect like the one on this page: On the left side, there is a panel that allows for adjusting the template. What I've noticed is that when I change the color, different CSS files are used (blue.css, pur ...

htmlcss

Generate a table framework by dynamically adjusting the number of rows and columns

I'm running into an issue with my implementation of nested for-loops to dynamically generate a table using JavaScript. For this particular scenario, let's assume numRows = 2 and numCols = 6. This is the code snippet in question: let table = $( ...

javascriptjqueryhtml

Center align the list items on mobile using flex in bootstrap 4

At the top of my page, I have a div called header_full_width. This div spans 100% of the width of the page. Within this div, there is a container, a row, a col-md-12 div, and an unordered list with list items and links. My issue is that on mobile devices, ...

htmlcsstwitter-bootstrapbootstrap-4anchor

utilize the Aspose library in Java to seamlessly convert HTML files into PowerPoint (

I have a Java variable that contains HTML code. I want to utilize the Aspose library to execute and render this HTML code into a PowerPoint presentation, with the CSS reference included. It would be great if the resulting PowerPoint is editable. ...

javahtmlpowerpointaspose

detect mouse click coordinates within an iframe that spans multiple domains

I am currently encountering an issue with tracking click position over a cross-domain iframe. Here is my current code: <div class="poin"> <iframe width="640" height="360" src="http://cross_domain" frameborder="0" allowfullscreen id="video">< ...

javascriptjqueryhtmliframecross-domain

Select a division and retrieve the identification of a different division

I am looking to trigger an event by clicking on one element and extracting the ID from a separate, unrelated div. Here is my attempt: $(".map_flag").on("click",function(){ var selectedID = ($(this).attr("data_modal")); $("#" + selectedID).fade ...

javascriptjqueryhtmlcss

The reason for the lack of auto complete functionality in this specific Bootstrap example remains unclear

I've been attempting to implement an auto-complete dropdown feature with dynamic data, but I'm facing an issue where no suggestions are displayed in the dropdown. I found this example on Datalists: https://getbootstrap.com/docs/5.1/forms/form-con ...

javascripthtmlbootstrap-4

There are additional elements that can be toggled, but I prefer to only toggle the one that I have selected

Every time I click on a table a, intending to toggle the .info inside the same div, it also toggles the .info in other divs. Can someone provide assistance with this issue? function info() { $('.table a').click(function() { $('.info ...

javascriptjqueryhtmlclicktoggle

I am currently seeking a way to validate if a variable corresponds to the choice made in the dropdown menu. Any suggestions on how to accomplish this task?

I have put together a simple drop down menu. My goal is to grab the currently selected value from the drop down list, store it in a variable, and display it in the console. The ultimate objective is to compare that variable with another one to determine if ...

javascriptjqueryhtmldom

Adding an active link to a vertical menu in Bootstrap 4: A step-by-step guide

Having trouble adding the active class to my bootstrap 4 menu. At the moment, only the top level item without sub-items is being highlighted as active. Can someone assist me in resolving this issue? For the top-level menu, the sl-menu-link class should ha ...

jquerybootstrap-4navbar

Incorrect x and y coordinates in the 'onclick' event

Hey there, I'm currently working on a simple prototype for an app. The concept is straightforward: there is a box, and when you click on it, it creates a square that changes color when clicked on. The issue I'm facing is that when I click on the ...

javascripthtmlcss

Suggestions for improving the smoothness of the Bootstrap toggle hide/show feature

Recently completed my bootstrap toggle hide/show feature and everything seems to be functioning correctly, except for the transition between the different contents. The borders appear jagged and not smooth when activating the toggle. I suspect there may b ...

javascriptjqueryhtmlcsstwitter-bootstrap

Error in linking PHP code to display stored tweets using HTML code

![enter image description here][1]![image of output of twitter_display.php][2] //htmlsearch.html file <!doctype html> <html> <head> <title>Twitter</title> <meta charset="utf-8"> <script> window.onload = function ...

javascriptphpjqueryhtmltwitter

Issues with implementing Bootstrap tabs in Vue application

Currently, I am in the process of developing an application using vue, vue-router, and bootstrap. My goal is to integrate tags in bootstrap as shown below: <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-l ...

javascripthtmlcsstwitter-bootstrapvue.js

Getting the value from a label and then setting it as the innerHTML of document.getElementById('label')

I have successfully implemented a JavaScript Google Maps functionality, but now I am facing an issue where I need to retrieve the type of HTML control and set it to JavaScript. Specifically, when attempting to extract the value from lblTitle, it is not f ...

javascripthtmlasp.netgoogle-maps