how to trigger modal when a input clicked?

Question

i want trigger bootstrap modal when i click in the text input, how can i do this with jquery?

<div id="myModal" class="modal fade" role="dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
    <p>Some text in the modal.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

Solution 1

You can just use the data attributes as well, no extra jQuery needed. Though I don't think it will be triggered if the user tabs into the input vs. clicking into it.

<input type="text" data-toggle="modal" data-target="#myModal">

DEMO

Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.

Solution 2

$(".someInputClass").click(function(){
    $(".modal-content").modal("show");
})

Solution 3

Or with focus, in case the input is tabbed to, like

$(".someInputClass").focus(function(){
    $("#myModal").modal("show");
});