シンプルにポップアップを実装できる「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を確認してみてください。
デモ
関連記事
-
-
レスポンシブにも対応したカレンダーを表示する「Calendario.js」
Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready
-
-
色々なタイプの画像ギャラリーが実装できる「Rondell」
「Rondell」は、様々なタイプの画像ギャラリーを実装してくれるjQueryプラグインです。 カルーセル・スライダー・ギャラリーなど一通り実装可能です。 ダウンロード 本家デモ
-
-
時刻入力に便利な「Timepicker for Bootstrap」
「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え
-
-
ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン
画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ
-
-
テキストに装飾効果を付けるプラグイン
Burn #テキストに炎のような効果 Burn サイト デモ スクリプト 実装 AAA $(function () { $('#defa
-
-
「jqPlot」を使って棒グラフを作成
jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。 スクリプト jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。
-
-
シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」
「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション
-
-
様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)
Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際
-
-
タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」
「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。 デフォルトでは、768
-
-
バリデーション プラグイン
Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2
- 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/