シンプルにポップアップを実装できる「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を確認してみてください。
デモ
関連記事
-
-
ローソク足チャート「jqPlot」
「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。 一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、
-
-
シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」
「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション
-
-
タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」
「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。 デフォルトでは、768
-
-
マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」
「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト
-
-
Bootstrap Modal + 拡張機能が実装できるプラグイン(Bootstrap 2)
Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 Twitter Bootstrap純正スクリプト ダウンロード / サイト
-
-
シンプルな画像スライダー/ギャラリー用プラグイン
スライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。 シン
-
-
入力テキストの文字数をカウントしてくれる「Textchange」
Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し
-
-
Lightboxなどが実装できるプラグイン「Magnific Popup」
「Magnific Popup」はlightboxを実装できるjQueryプラグインです。 この手のものは、商用利用に制限がかかっているものが多いですがこのプラグインはMITライセンスで提供されてい
-
-
「jqPlot」 カスタマイズ
以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし
-
-
時刻入力に便利な「Timepicker for Bootstrap」
「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え
- PREV
- MySQL WorkbenchでSSH経由でDBに接続
- NEXT
- ログローテーション







Comment
@land3939 ほんと腐るほどあるからオススメしづらいなー。メジャーなのはjQuery UIのDialog機能かな https://t.co/EXSHXYfjd7 今調べて見つけた中で、ポップアップとは違うけどこれでも良さそう https://t.co/rFEKpPvr00
あとでhttp://t.co/7E8HVtSn4Z
[…] http://kwski.net/jquery/1026/ […]
うん、できそう。やってみます!ありがとう。わかんないところがあったら教えてねw RT @kk1126 JQuery使うと簡単かもですよ! http://kwski.net/jquery/1026/