円形のモーダルウィンドウを表示させる

1. jsの読み込み

headタグにjsの読み込みの記述をします。同時にjQueryとTransit.jsの読み込みの記述もします。

<script src="js/jquery.min.js"></script>
<script src="js/jquery.transit.min.js"></script>
<script src="js/jquery.circle_popup.js"></script>

2. スクリプトの記述

下記の要領でスクリプトを記述します。

<script>
$(function(){
    var params = {
        'width': '400px',           // modal window size
        'height': '400px',          // modal window size
        'top': '',                  // ウィンドウの位置。空だと自動で中央寄せされます。
        'left': '',                 // ウィンドウの位置。空だと自動で中央寄せされます。
        'scale': '0.1',             // 表示時のウィンドウの大きさを指定できます(0.1 〜 1)
        'speed': '400',             // アニメーションスピード
        'end_speed': '300',         // 閉じる時のアニメーションスピード
        'ease': 'ease',             // イージングの種類 by jQuery Transit
        'end_ease': 'ease',         // 閉じる時のイージングの種類 by jQuery Transit
        'background': '#5b7fe9'     // background color
    };
    $.fn.circle_popup(params);
});
</script>

3. htmlの記述

ボタンに「id="circle-button"」を付与します。表示したいコンテンツをdivで囲み、「id="circle-popup"」を付与します。

<p id="circle-button">ボタン</p>
<div id="circle-popup">
    <div id="circle-content">
        <p>ポップアップの中身です。</p>
        <p>ポップアップの中身です。</p>
        <p>ポップアップの中身です。</p>
        <p>ポップアップの中身です。</p>
    </div>
</div>

4. デザインのカスタマイズ

付属の「circle_popup.css」でデザインのカスタマイズができます。