Question

我有一个像下面的输入框，后面有一个图标图像。

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

点击图标后，我想要一个小的弹出窗口或模态，打开并覆盖整个文本字段。

我该怎么做？ Here's小提琴。

使用此代码，模态不会到来。

Answer 1

我认为你正在寻找这样的东西。 Bootstrap Modal不适合您的情况：）

$(".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>

Answer 2

使用Bootstrap Popover代替调整css，使其覆盖文本框。

popover codepen example

<div class="parent">
  <div class="child">text</div>
</div>

$（＆＃39;＃POP1＆＃39）。酥料饼（）

}）

您可以使用触发器方法来控制显示/隐藏或使用关闭按钮自定义弹出窗口。

在图像上单击打开文本字段的弹出/模式

2 个答案: