テキストをポップアップで表示できるプラグイン「Featherlight.js」

こちらのリンクをクリックするとポップアップが表示されます。クリックしてみてください。

 

このように文章がポップアップの中に表示されます。

右上の閉じるボタンか、黒背景部分を押すとポップアップが閉じます。

文章やボックス内のスタイルを変えることはもちろん、画像やリンクを表示させることも可能です。

 

サンプル画像

 

featherlight.cssの設定を変えて、任意のスタイルに調整してみてください。

サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。

ポップアップで表示するdivには必ずdisplay: none;をかけて、クリック前は非表示になるよう設定してください。

記事へ戻る