ポップアップ表示を行うプラグインLityの背景を変更する

Question

いつもお世話になります。

現在railsでwebサイトを作成しております。
下記サイトを参考に画像などのポップアップ表示を行うLityというプラグインを導入しました。
導入自体はできたのですが、ポップアップ時の背景である黒い部分の色を変更したいのですがどようにすればよいのでしょうか。

https://web-bruno.com/lity-image-pop-up/

ご教示いただけると幸いです。
よろしくお願いいたします。

Answer 1

色を変えているのはlity.cssの最初のほうに書かれているこの部分のbackgroundなので、変えるか上書きするかしてください。

.lity {
  z-index: 9990;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  white-space: nowrap;
  background: #0b0b0b;
/*  background: rgba(0, 0, 0, 0.9);*/
  background: rgba(0, 0, 0, 0.3);
  outline: none !important;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

Comments

[lyzmfeqpxs54]

早速のご回答ありがとうございます。

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.css' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.js'></script>

度々の質問で恐縮ですが、上記を記述し、SDN経由で導入しました、
もしcssをいじりたい場合はファイルをフォルダ内に導入しなければならないということでしょうか。

[x_x]

Lityのファイルを変更しなくても、<link />の後ろに
<style>.lity { background: #ccc; }</style>
などと書けばそれでいいです。

[lyzmfeqpxs54]

ご回答ありがとうございます。
実装したいことができました。

本当にありがとうございました。