JavaScript

色んなメニューやコンテンツをモーダルウィンドウで実装できるjQueryプラグイン「Pop Easy」

お洒落で可愛らしいjQueryプラグインを見つけたのでご紹介します。ログインフォームや動画、地図などといった色んなメニューやコンテンツをモーダルウィンドウで実装することができる「Pop Easy」です。オプションで色んな設定変更が可能なので自分好みにカスタマイズもしやすいですね。

[ads_center]

使い方

実際のデモではこのようにログインフォームや動画など実用性あるコンテンツをモーダルウィンドウで実装されています。

Pop Easy

なかなかお洒落でよさそうですね。

使い方もシンプルで特に難しい設定はなさそうな感じです。オプションでエフェクト、スピード、背景色、透明度など色んな項目が設定できます。

$(document).ready(function(){
    $('.modalLink').modal({
        trigger: '.modalLink',
        olay:'div.overlay',
        modals:'div.modal',
        animationEffect: 'slidedown',
        animationSpeed: 400,
        moveModalSpeed: 'slow',
        background: '00c2ff',
        opacity: 0.8,
        openOnLoad: false,
        docClose: true,
        closeByEscape: true,
        moveOnScroll: true,
        resizeWindow: true,
        video:'URLを指定',
        close:'.closeBtn'
    });
});

モーダルウィンドウはお洒落なWebサイトなんかによく使われていますよね。コンテンツを格好良く見せたい、または集中させたい時なんかに使ってみるとよさそうです。

ダウンロードや詳しい使い方に関しては以下の公式サイトで確認できます。

関連記事

  1. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで今まで紹介したjQueryプラグイン25選のまとめ 2011/09 – 201…

    2011年9月〜2012年3月までに当ブログで紹介したjQueryプラ…

  2. CoutUpCircle

    JavaScript

    カウントアップしてくれるjQueryプラグイン「CoutUpCircle」

    CoutUpCircleは目標に指定した数までカウントアップしてくれる…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでJavaScriptのfor…inを使ってオブジェクトから値を1つずつ取り…

    JavaScriptにはfor...inというプロパティの数だけ繰り返…

  4. JavaScript

    スクロール時にナビゲーションが上部に固定されるレスポンシブ対応のjQueryプラグイン「HeadSh…

    スクロールするとナビゲーションが上部に固定配置されるjQueryプラグ…

  5. Mobilepopup

    JavaScript

    軽量でモバイルにも最適なポップアップウィンドウを実装できる「Mobilepopup」

    Mobilepopupは、軽量でカスタマイズ性に優れたモバイルにも最適…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP