jQuery プラグインを使用して通常のモーダル ウィンドウ ログインを作成する

非表示モーダル ウィンドウ テクノロジは、Web ページに表示する必要のないインターフェイス要素を処理するための優れたソリューションです。ソーシャル ネットワークでは、モーダル ウィンドウを使用して、メンバーのみに表示されるプライベート メッセージやフォームを伝達できます。モーダル ウィンドウは、メイン サイトとは別のブログや雑誌サイトの著者ログイン ページにも適しており、HTML マークアップを使用してすべてを同じウィンドウ内にレンダリングできるため、JavaScript で新しいウィンドウを作成するよりも簡単です。

jQuery プラグイン leanModal を使用して通常のモーダル ウィンドウを作成する方法を説明します。 MIT の一般ライセンスをお持ちの場合、このプラグインは完全にオープンソースであり、非常に使いやすく、カスタマイズされた効果を実現することもできます。

オンライン デモ - ソース コードをダウンロード

開始

まず、「index.html」という名前の 2 つのファイルを作成しますと「style.css」ファイルを同じディレクトリに配置したら、先ほどの 2 つのファイルを含む /js/ という名前の別のフォルダーを作成します。 1 つ目はマイクロ jQuery ライブラリで、2 つ目は jquery.leanModal.min.js という名前の leanModal プラグインです。

コードをコピーします コードは次のとおりです。

🎜>
="icon " href="http://designshack.net/favicon.ico">







良いニュースは、leanModal プラグインが提供するのはデフォルトの CSS スタイル シートのみであるためです。非常に基本的な JS 機能、すべてが合理化され、必要最低限​​のテンプレートのみが残されました。ただし、ダーク オーバーレイ効果を実現するには CSS ブロックを複製する必要があります。以下は、デフォルトのスタイルシートで使用するためにプラグイン Web サイトからコピーしたコードです。

コードをコピーします コードは次のとおりです。 #lean_overlay { 位置: 固定;インデックス:100; 上: 0px; 左: 0px;

モーダル ウィンドウの効果は、ログイン フォーム以外にもさまざまな状況で使用できます。 Web ページのさまざまな UI 要素を考慮し、どの要素が独自のウィンドウでより役立つかを検討する必要があります。これには、誰もが気に入らない可能性のある特別な形式や長い詳細が含まれます。標準の HTML ブロックを使用してこの leanModal jQuery 効果を実現する方法を確認するには、私のオンライン サンプル デモをご覧ください。 CSS の基本的な知識がある人なら、私のデフォルトのスタイルを問題なく理解できるでしょう。この機能には非常に多くの用途があり、その中には想像力豊かなものもあります。しかし、私はこれらのサンプル チュートリアル コードが開発者に時間を節約するための標準テンプレートを提供することを心から願っています。