CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Suraj Shukla
Suraj Shukla

Reputation: 187

On an image click open popup/modal covering the text field

I have an input box like below which has an icon image after it.

<div class="input-div">
   <input type="text" placeholder="DOB">
   <img src="http://i.imgur.com/QoByi9i.png" alt="" class="info">
</div>

After the icon is clicked, I want a small popup or modal which opens and covers the entire text field.

How can I do that? Here's a fiddle.

With this code, the modal is not coming.

Upvotes: 2

Views: 3844

Answers (2)

Ritesh Kashyap
Ritesh Kashyap

Reputation: 394

Use Bootstrap Popover instead and tweak css to make it cover your text box.

popover codepen example

$(function () {

$('#pop1').popover()

})

You can use trigger methods to control show/hide or customize popover with close button.

Upvotes: 0

Aslam
Aslam

Reputation: 9672

I think you are looking for something like this. Bootstrap Modal is not the solution for your case :)

$(".info").on('click', function() {

  $(".popup-box").toggle();
})
.input-div {
  margin: 20px;
  position: relative;
  display: inline-block;
}
.popup-box {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  padding: 3px;
  width: 87%;
  background: #ccc;
  display: none;
}
.info {
  cursor: pointer;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-div">
  <input type="text" placeholder="DOB">
  <img src="http://i.imgur.com/QoByi9i.png" alt="" class="info">
  <div class="popup-box">Hello! i am a small popup</div>
</div>

Upvotes: 1

Related Questions