表示コンテンツの切り替えも出来るシンプルなモーダルウィンドウを実現するjQueryのスクリプト
シンプルなモーダルウィンドウを制作しました。有名なモーダルウィンドウに比べらたら出来ないことだらけです。画像をグループ化して他の画像へ移動することや、img
内のtitle
からキャプションを生成、他のHTMLを読み込んでの表示等もできません。その変わり3つのメリットがあります。
- 軽いこと。JSファイルにすると3K以下の軽さであり、画像を必要とせずCSSも普通に記述して20行程の導入のしやすさ。つまり気軽さ。
- シンプルなこと。見飽きた有名なモーダルウィンドウのインターフェイスに比べて何というシンプルさ、そう閉じるボタンを取り払うほどに。(※閉じるボタンが無くても、グレーバックをクリックすると閉じるコトを認識している人が増えていると、勝手に判断した為です。あとがきでこの事についてチョット書いていますので、興味があれば読んでみて下さい。)
- 表示コンテンツの切り替えができること。コレが本命。とっても気軽にモーダルウィンドウ内で表示コンテンツを切り替えることができます。まあいつもの如く、どこかにあるんでしょうけど、見つけられなかったので制作してみたパターンです。
っとまあ、無理やり3つのメリットをこじつけてみました。まあ興味を示した方はどうぞご覧下さいませ。