シンプルにポップアップを実装できる「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を確認してみてください。
デモ
関連記事
-
-
カルーセル プラグイン
「カルーセル(Carousel)」とは"回転木馬"という意味らしいのですが、jQuery(Javascript)では画像やコンテンツをスライド表示させるもののようです。が、スライダーとの違いはよく分り
-
-
ファイルアップロードフォーム プラグイン
Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h
-
-
テーブル・リスト要素を便利にしてくれるプラグイン
レスポンシブに対応したテーブルを実装できる「FooTable」 リストをインクリメント検索・ソートできる「List.js」 colResizable #カラム幅可変
-
-
「jqPlot」 カスタマイズ
以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし
-
-
カウントダウン プラグイン
FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd
-
-
シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」
「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション
-
-
日付入力に便利な「Datepicker for Bootstrap」
「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot
-
-
画像ズーム プラグイン
画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。
-
-
親要素の大きさに合わせてテキストをリサイズ「FitText」
「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 responsive_head
-
-
ページ内のフォントサイズを変更してくれる「Text Resizer」
「jQuery Text Resizer Plugin」は、ページ内のフォントサイズを変更してくれるjQueryプラグインです。要素を限定してリサイズすることも可能です。jquery.cookie.j
- 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/