私の後ろにアイコン画像がある以下のような入力ボックスがあります。画像上で、テキストフィールドを開くポップアップ/モーダルを開く
<div class="input-div">
<input type="text" placeholder="DOB">
<img src="http://i.imgur.com/QoByi9i.png" alt="" class="info">
</div>
アイコンをクリックすると、小さなポップアップまたはモーダルが開き、テキストフィールド全体が表示されます。
どうすればいいですか？ Here'sはフィドルです。
このコードでは、モーダルが来ていません。
私はあなたがこのようなものを探していると思います。ブートストラップモーダルではなく、あなたのケースのためのソリューション:)
$(".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>これは完璧に見えますが、複数のフォームフィールドがあるときにこのような幅に疑問を抱いています。問題があるかもしれません。これを試してみてください。 –
jsコードを調整するだけです少しそれはすべてのために動作します。あなたが何を思いついたか教えてください。 – Aslam
使用ブートストラップポップオーバーではありません、それはあなたのテキストボックスをカバーするためにCSSを微調整します。
$(function() {
$（ '＃のPOP1'）。ポップオーバー（）
}）
あなたは、表示/非表示を制御したり、閉じるボタンでポップオーバーをカスタマイズするには、トリガーメソッドを使用することができます。
これはテキストフィールドをカバーする必要がありますか？ – Aslam
JQueryをロードしていないため、コードが機能していません。 https://jsfiddle.net/843d2fn6/ – Manwal
@hunzaboyポップアップ/モーダルの幅は、テキストフィールドと同じにする必要があります。 これは例として1つのテキストフィールドです。私はフォーム全体を持っていますので、フォーム全体をカバーするべきではありません。 –