Javascript

【Javascript】JavascriptとCSS3 Transitionで作成されたモーダルPL Modal

March 9, 2018
PL Modal

PL ModalはJavascriptとCSS Transitionで作成されたカスタマイズ可能なモーダル。

Usage

let settings = {
	avoidClose: false,
	closeWithOverlay: true,
	effectName: 'pl-effect-4'
};

let modal = new pl.Modal(settings);
let element = document.getElementById('element');

modal.open(element);

Create your own effect

独自のエフェクトを作成するには、.pl-modal-contentエレメントに適用される2つのCSSスタイルを作成する必要があります。

/* Initial state of "custom-effect" */
.custom-effect .pl-modal-content {
    opacity: 0;
    
    -webkit-transition: opacity 375ms; 
    transition: opacity 375ms;
}

モーダルオープン状態

/* Open state of "custom-effect" */
.custom-effect.pl-modal-open .pl-modal-content {
    opacity: 1;
}

カスタムエフェクトを呼び出すにはpl.Modalの変数にeffectNameを設定する必要があります

/* Call our new custom effect */
let modal = new pl.Modal({ effectName: 'custom-effect' });