シンプルにポップアップを実装できる「PopBox」

「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。

スクリプト

<link href="css/popbox.css" type="text/css" rel="stylesheet">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/popbox.js" type="text/javascript"></script>

HTML

<div class='popbox'>
    <a class='open' href='#'>Click Here!</a>
    <div class='collapse'>                       <!-- ポップアップ全体 -->
        <div class='box'>                        <!-- ポップアップ -->
            <div class='arrow'></div>            <!-- ポップアップの矢印 -->
            <div class='arrow-border'></div>     <!-- ポップアップの外線 -->
            Content in PopBox goes here          <!-- ポップアップ内のコンテンツ -->
            <a href="#" class="close">close</a>  <!-- closeリンク -->
        </div>
    </div>
</div>

呼び出し

$('.popbox').popbox({
    'open'          : '.open',
    'box'           : '.box',
    'arrow'         : '.arrow',
    'arrow-border'  : '.arrow-border',
    'close'         : '.close'
});

この中で、要素名をラッピングできます。(結構、一般的な名前を使っているためか)
ただし、この変更に伴ってCSS内の名前はこちらで変更する必要があります。
"collapse"も結構かぶることがあると思うので、動作しない場合は、ここのCSSを確認してみてください。

デモ

デモ
デモ (ナビゲーション上にTwitterのログインフォームのような)

Related

サイトのキャプチャをショートコードで生成してくれる「Browser Shots」 Bootstrap Modal + 拡張機能が実装できるプラグイン Lightboxなどが実装できるプラグイン「Magnific Popup」 実装方法が選べるツールチップ用プラグイン「Smallipop」 シンプルにモーダルウィンドウを実装できる「leanModal」 ポップアップ・モーダル ウィンドウ プラグイン ポップアップが実装できるプラグイン「Anything popup」「Easy Modal」 条件を付けて訪問時に開くポップアップを実装できる「WordPress Popup」