Lityの閉じるボタン実装と背景固定、ポップアップのスクロール

jQueryを読み込んでいる場合、Lightbox系のモーダルウィンドウ、ポップアップを実装するのに軽量なライブラリ「Lity」。
Webサイトに組み込むに当たり、モーダルウィンドウの「閉じる」ボタンの実装方法と、あと一歩こだわりたい、というカスタマイズ方法を記載してみました。

Lityの基本的な使い方は、公式サイトなどを御覧ください。
Lity – Lightweight, accessible and responsive lightbox

モーダルウィンドウで閉じるボタンを実装する

ポップアップしたモーダルウィンドウに「閉じるボタン」を設置する方法です。

公式サイトには記載が見つけられず…
調べた結果、モーダルウィンドウの閉じるボタン部分に「data-lity-close」を記載すれば閉じるようになりました。

html

<a data-lity data-lity-target="#popup" href="javascript:;" >ポップアップ開く</a>

<div id="popup" class="lity-hide">
  ポップアップ内容
  <p><a data-lity-close href="javascript:;">ポップアップ閉じる</a></p>
</div>

例では、aタグに「data-lity-close」を記載してますが、手間のpタグに記載しても動きます。

モーダルが開いている時のページ（背景）スクロールを止める

Lityのデフォルトではモーダルウィンドウが開いている際に、マウスをスクロールすると、背景のページ部分がスクロールしてしまいます。
モーダルを閉じると、スクロールする前の位置にちゃんと戻るのですが、個人的に直したかったので、モーダルウィンドウが開いている間はスクロールしないようにカスタマイズしてみました。

JavaScript

$(function(){
	var $body =  $('body');
	$(document).on('lity:open', function(event, instance) {
		currentScroll = $(window).scrollTop();
		$body.css({
			position: 'fixed',
			width: '100%',
			top: -1 * currentScroll
		});
	});
	$(document).on('lity:close', function(event, instance) {
		$body.attr('style', '');
		$('html, body').prop({scrollTop: currentScroll});
	});
});

Lityのウィンドウが開いた際のページのスクロール位置を記憶し、固定。
Lityのウィンドウを閉じる際に元に戻す、といった感じです。

モーダルウィンドウをスクロールできるようにする

モーダルウィンドウで表示する内容が縦に長い場合、Lityのデフォルトではウィンドウが切れてしまいスクロール出来ません。
lity.cssを多少いじることで、スクロールできるようになります。
デフォルトのCSSを書き換えるのに抵抗が有る方は、別に記載して上書きでもするといいと思います。

lity.css

.lity-wrap {
  z-index: 99990;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 20px;　//好みで追加
  text-align: center;
  outline: none !important;
  overflow: scroll;　//追加
  display: flex;　//追加
  align-items: center;　//追加
  justify-content: center;　//追加
  }
//追加
.lity-content > * {
  max-height: none !important;
  }
.lity-image img {
  margin: 0 auto;　//追加
  max-width: 100%;
  display: block;
  line-height: 0;
  border: 0;
  }