popeasy

WEBページ上で、情報や画像、動画をポップアップするアレです。
ページ遷移せずに色々情報を見せたいときなどに、とても役立ちそうです。

DEMO

まずファイル群を読み込み

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.modal.js'></script>
<script type='text/javascript' src='js/site.js'></script>

オプション項目を設定

$('.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:'http://player.vimeo.com/video/9641036?color=eb5a3d',
    close:'.closeBtn'
});

WEB制作時に情報をまとめたい時などに重宝しそうです。
ダウンロードはこちら
Pop Easy | by Thomas Grauer