jQuery、プラグイン、Lightbox風モーダルウィンドウ

謎のプリン語る。
一人書く人増えました。

jQuery、プラグイン、Lightbox風モーダルウィンドウ

2015年04月20日

みやびプリン 140 87

144 144

※この記事は5年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。
※同内容の最新記事があります。
最新記事はこちら→

また投稿が久々になってしまった。

さて、今回は、仕事で、ライトボックス風モーダルウィンドウを出すjQueryプラグインを作ってみたので、
公開してみました。

というのも、探しても、求めるようなシンプルな機能じゃなかったり、デザインが変えれなかったりなどするので、
自作してみました。

まずは、スクリプト。

jquery.smwv.js
jquery.smwv.min.js
(min版、は軽量版なので、どちらでもオッケーです。)

スクリプトだけ書かれた画面が出るので、コピペしてお使いください。

さて、使い方は、下記。


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
<script src=" 本エントリーのJSを格納した場所 /jquery.smwv.min.js">
<script>
$(function(){

 //モーダルウィンドウを表示させたいブロックのIDを入れたリンクのクラスに、smwvを適用
 $('.testLink').simpleModalWindowView({
  'boxWidth': 650,
  'viewMode': 'inline'
 });

});
</script>
</head>
<body>
<div style="display: none;">
 <p id="modalView"><img src="test.gif">

</div> <p><a href="#modalView" class="testLink">テストリンク</a></p> </body>

使い方としては、簡単で、
colorboxとほぼほぼ同じ使い方。
まずは、headの中でjQueryと、同エントリのプラグインを読み込み、
モーダルウィンドウで表示させたいリンクのクラスに対して、
本プラグインの関数をつける。
あとは、クラスをつけたaタグのhrefに、ハッシュタグで表示させたいブロックのIDを入れる。

そして、閉じる用のボタンが、
"SModalCloseBtn"のID名でdivが生成されるので、CSSで自由に表示を変えてください。

オプションでけっこう細かく設定もできます。

speedOpen:ウィンドウを開く時のスピード
speedClose:ウィンドウを閉じる時のスピード
speedMove:ウィンドウのサイズを変更した時の、コンテンツの動くスピード
shadowUsed:ウィンドウに影をつけるかどうか true/false
shadowSize:影のぼかしの大きさ
shadowSpread:影の範囲
shadowOpacity:影の透明度 (0〜1で指定)
backColor:背景のオーバーレイの色(カラーコードで指定)
backOpacity:背景のオーバーレイの透明度(0〜1で指定)
boxWidth:表示させるコンテンツの横幅
boxHeight:表示させるコンテンツの縦幅
boxColor:表示コンテンツの背景(カラーコードで指定)
wrapperPadding:表示コンテンツの内側の隙間の指定
radiusUsed:角丸にするかどうか。true/false
radiusSize:角丸の大きさ
viewMode:ブロックを表示させるか、画像化を文字列で指定。img/inline
 ※デフォルトは、img

と、細かく設定できるようになってます。

とまぁ、ここまで見ればわかるように・・・。
CSS3をふんだんに使っているので、
このプラグインは、IE8以下は完全にサポート外になってます。

IE8以下を無視できる状況ならば、お使いください。汗

グループ化可能にして、次へボタンとかつけれるようにしたいですね。

とりあえず、シンプルにライトボックスっぽく表示させたいなら、ぜひお使いください。
MITライセンスなので、ご自由にじゃんじゃんお使いください。

まだまだいろいろ作りたい。

ロードス島戦記オンライン - メイン

トラックバック(0)

トラックバックURL:

コメントする

ページトップへ戻る