jQueryプラグインのポップアップ、「PopBox」をBootstrap環境で使う。

Bootstrapを利用する環境でPopBoxをそのまま利用すると、表示がおかしくなり利用できなくなるので対処法をメモ。

PopBoxの導入についてはこちらの記事を参考にさせてもらいました！
jQuery - シンプルにポップアップを実装できる「PopBox」

どうやらPopBoxとBootstrapで利用するクラス名が被っているようなので、PopBoxで利用するいくつかのクラスをラッピングしてやります。
クラス名をopenの代わりにpopOpen、collapseの代わりにpopColで使用しています。

HTML

<div class='popbox'>
    <a class='popOpen' href='#'>Click Here!</a>
    <div class='popCol'>                       
        <div class='box'>                        
            <div class='arrow'></div>            
            <div class='arrow-border'></div>     
            Content in PopBox goes here          
            <a href="#" class="close">close</a>  
        </div>
    </div>
</div>

JavaScript

$('.popbox').popbox({
    'open'          : '.popOpen',
    'collapse'     : '.popCol'
});