軽量でシンプルなjQueryモーダルウィンドウ「POP EASY」

「POP EASY」は2KBという軽量さでありながら、IE7含む各種ブラウザに対応したシンプルなモーダルウィンドウを実装するjQueryプラグインです。

POP EASY

screenshot199

サンプルとして載せられているものを紹介します。レトロなデザインが可愛いです。気になる方はぜひ要素の検証からCSSを参考にしてください。

 

シンプルなモーダルウィンドウです。

screenshot200

 

もちろんフォームも作れます。

screenshot201

 

動画の埋め込みも可能です。

screenshot202

 

iframeの埋め込みもOKなので、このようにMapを表示させることもできます。

screenshot203

 

そしてなんと言ってもこのプラグインの優れたところは実装の簡単さにあります。JavaScriptのみ取り上げます。

$('.modalLink').modal({
  trigger: '.modalLink',
  olay:'div.overlay',
  modals:'div.modal',
  animationEffect: 'slideDown',
  animationSpeed: 400,
  moveModalSpeed: 'slow',
  background: 'a2d3cd',
  opacity: 0.7,
  openOnLoad: false,
  docClose: true,
  closeByEscape: true,
  moveOnScroll: true,
  resizeWindow: true,
  video: 'http://player.vimeo.com/video/2355334?color=eb5a3d',
  videoClass:'video',
  close:'.closeBtn'
});

フルオプションでこれだけです。それぞれのオプションはリンク先で解説されています。

モーダルウィンドウを実装するライブラリはたくさんあるので迷いますが、保守性を考ると実装が簡単なものが望ましいです。

 

Home > JavaScript > 軽量でシンプルなjQueryモーダルウィンドウ「POP EASY」

Return to page top