シンプルにポップアップを実装できる「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を確認してみてください。
デモ
関連記事
-
-
ページの画像を非同期で読み込んでくれる「Lazy Load」
「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード |
-
-
シンプルにモーダルウィンドウを実装できる「leanModal」
「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま
-
-
ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」
「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード デモ スクリプ
-
-
レスポンシブ対応の画像スライダー・ギャラリー用プラグイン
画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からレスポンシブ対応のものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlide
-
-
スワイプ対応の画像スライダー・ギャラリー用プラグイン
画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からスワイプ操作で画像をスライドできるものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「b
-
-
ポップアップ・モーダル ウィンドウ プラグイン
ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers
-
-
シンプルな画像スライダー/ギャラリー用プラグイン
スライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。 シン
-
-
シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」
「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション
-
-
ファイルアップロードフォーム プラグイン
Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h
-
-
レスポンシブにも対応したカレンダーを表示する「Calendario.js」
Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready
- 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/