javascript - ドロップダウン入力フィールド

Question

同様のドロップダウン入力フィールド（下の画像）を自分のWebサイトに追加したいと思います。リンク/画像/ボタンをクリックしたときに表示したい。これはJavaScriptで実行できますか？また、ページの流れに影響を与えたくありません。

Answer 1

これはJavaScriptで実行できますか？

はい。JavaScript / CSSに相当するものは、（クリックすると）position: fixedまたはで要素を表示するボタンになりますposition: absolute。

jQueryを使用した簡単な例を次に示します。http：//jsfiddle.net/Byujd/1/

Answer 2

これは少し複雑です。

HTML とデフォルトのスタイル

コンテンツの上に表示される要素が必要です。

<div class="modal">
  <!-- Some content like textarea and stuff -->
</div>

position-property などを使用して、このボックスのスタイルを設定できます。

.modal {
  position: absolute;
  z-index: 999;
}

これは、残りのコンテンツの上に表示されるようになりました。

いくつかの jQuery の良さ

ボタンにはリスナーが必要です。jQuery を使用すると、次のようになります。

$('.the-buttons-class').click( function (e) {
  e.preventDefault();
  $('.modal').toggle();
});

より良い方法

jQuery のtoggle()-function でモーダルの状態を切り替える代わりに、クラスを切り替えて、それに応じて状態を操作できます。

CSS:

.modal {
  ...
  display: none;
}

.modal.shown {
  display: block;
}

JS:

$('.the-buttons-class').click( function (e) {
  e.preventDefault();
  $('.modal').toggleClass('shown');
});

モアー

私は自分のページでかなり似たようなことをしました。検索ボックスに必ずチェックを入れてください。そのコードはGitHub にあります。