【モーダル】Magnific Popupのカスタマイズ

モーダルウィンドウでMagnific Popupを使う機会があったので

使い方のメモです

githubはこちら↓

https://github.com/dimsemenov/Magnific-Popup

モーダルの幅を変えたい

クラス「.mfp-image-holder .mfp-content」をカスタマイズします

.mfp-image-holder .mfp-content {
  max-width: 750px;
}

閉じるボタンを変えたい

クラス「.mfp-close」をカスタマイズします。

モーダルの背景色を変えたい

クラス 「. mfp-bg 」 をカスタマイズします。

.mfp-bg {
  background-color: rgba(0, 0, 0, 0.8);
}

カウンターを変更したい

クラス 「. mfp-counter 」 をカスタマイズします。

display:none;で消すこともできます。

.mfp-counter {
  display: none;
}