また投稿が久々になってしまった。
さて、今回は、仕事で、ライトボックス風モーダルウィンドウを出す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ライセンスなので、ご自由にじゃんじゃんお使いください。
まだまだいろいろ作りたい。
コメントする