【Lightbox2】ポップアップ画像の枠を消す方法

1731 ワード
codepen HTML ポップアップ lightbox モーダル HTML テキストリンク

はじめに

ここでは「ポップアップ画像の枠を消す方法」のみを紹介するため、Lightbox2を用いたポップアップ画像の作り方については以下を参照

方法

CSS（またはStylusなど）に以下のようなコードを追加する

CSSの例
#lightbox .lb-image {
  border: none;
}
Stylusの例
#lightbox .lb-image
  border: none

全体のコード例とプレビュー

  • 「View Compiled」を押すと Pug -> HTML、Stylus -> CSS に切り替わる
  • 「0.5x」で見ることを推奨

See the Pen Delaunay Triangulation by Probability Hill (@probabilityhill) on CodePen.