ホームページ > ウェブフロントエンド > jsチュートリアル > JqueryポップアップウィンドウプラグインLeanModal_jqueryの使い方

JqueryポップアップウィンドウプラグインLeanModal_jqueryの使い方

WBOY
リリース: 2016-05-16 17:55:28
オリジナル
1329 人が閲覧しました

ポップアップ ウィンドウの形式で Web サイトを開発するのに不可欠です。今日、私はインターネット上で LeanModal という小さなプラグインを検索し、自分自身と他の人の便宜のためにここに記録しました。

このプラグインは外国人によって書かれており、その最大の利点は圧縮後のサイズが 1k 未満であることです。もちろん、このプラグインは JQuery に寄生します。

2. 使用手順:

1. Jquery.js と leanModal.min.js を参照します。


JqueryポップアップウィンドウプラグインLeanModal_jqueryの使い方




2. このスタイルは、半透明の背景レイヤーに使用されます。非表示にするコードは次のとおりです:


コードをコピーします コードは次のとおりです:
#lean_overlay { 位置: 固定; 左: 0px; 高さ: 100%; 表示: なし }
#OpenWindowなし繰り返しスクロール0 0 #FFFFFF; ボックスシャドウ: 0 0 4px rgba(0, 0, 0, 0.7); -index: 11000; left: 50%; margin-left: - 202px; 位置: 固定; }


3. > 方法 1 は ID 付きの要素をポップアップウィンドウに添付する方法
方法 2 は A タグに rel="leanModal" を持つ要素をすべてポップアップウィンドウに添付できる方法
オーバーロードできるパラメーターは 3 つあります。
top: ポップアップ ウィンドウの上部からの距離。単位はピクセルで、「px」は追加しません。
オーバーレイ: 背景の透明度、最大値は 1。値が大きいほど透明度が高くなります。初期値は 0.5 です。
CloseButton: 開いているウィンドウの閉じるボタンのスタイル



コードをコピー コードは次のとおりです。 $(document).ready(function () {
/ /$('#aOpen').leanModal ({ トップ: 100, closeButton: ".modal_close" });
$('a[rel*=leanModal]').leanModal({ トップ: 100, closeButton: ".modal_close" });


3. デモのダウンロード
オンライン デモ
http://http://demo.jb51.net/js/ 2012/LeanModal/

パッケージのダウンロード
http://www.jb51.net/jiaoben/42278.html
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート