jQuery と CSS を使用してシンプルなポップアップ ウィンドウを作成する方法

jQuery を使用して単純なポップアップ ウィンドウを表示する方法

Web 開発では、ポップアップを表示するとユーザーの対話性が向上します。この記事では、jQuery を使用してラベルと入力フィールドを含む単純なポップアップ ウィンドウを作成する方法を検討します。

問題:

次のような状況を考えてみましょう。 ID「mail」の要素をクリックするとポップアップウィンドウが表示されます。このポップアップには、「email」というテキストのラベルと、対応するテキスト ボックスが含まれている必要があります。

解決策:

jQuery を使用して単純なポップアップ ウィンドウを作成するには、次のようにします。 CSSとJavaScriptを組み合わせます。細かく見てみましょう:

CSS:

まず、ポップアップの CSS スタイルを定義しましょう:

.pop {
//... CSS code here...
}

JavaScript:

次に、jQuery を作成します機能:

$("#contact").on('click', function() {
    //... jQuery code here...
});

HTML:

最後に、ポップアップの HTML マークアップとそれをトリガーする要素を定義する必要があります:

<div> <p><strong>追加の考慮事項:</strong></p>
<p>についてユーザー エクスペリエンスが向上し、ポップアップにアニメーションを組み込むことができます。さらに、ポップアップ コンテンツが重い場合は、遅延を最小限に抑えるために AJAX 経由でロードすることを検討してください。</p>
<p><strong>実装例:</strong></p>
<p>以下は、ソリューションの完全な実装例です。提供:</p>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">.pop {
  display: none;
  position: absolute;
  z-index: 1000;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
}

JavaScript:

$("#contact").on('click', function() {
  $(".pop").toggle();
});

HTML:

<div><p>この実装により、シンプルで「お問い合わせ」リンクをクリックすると、応答性の高いポップアップ ウィンドウが表示されます。</p></div>