サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
WWDC24
unicolabo.jp
サムネイル画像をクリックすると大きいサイズの画像がモーダルウィンドウ表示される、あの効果。従来、jQuery プラグインの Lightbox などを導入することが多いと思いますが、今回は CSSのみで実装してみましょう。 サンプルコード <!-- HTML --> <div id="sample"> <a href="#figure"><img src="//picsum.photos/100?image=0" alt=""></a> <figure id="figure"> <a id="overlay" href="#overlay"> <img src="//picsum.photos/600?image=0" alt=""> <figcaption>どこかをクリックするとモーダルウィンドウを閉じます</figcaption> </a> </figure> </div> /* CSS
このページを最初にブックマークしてみませんか?
『unicolabo.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く