シンプルにポップアップを実装できる「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を確認してみてください。

デモ

デモ
デモ (ナビゲーション上にTwitterのログインフォームのような)

  • このエントリーをはてなブックマークに追加

関連記事

no image

日付入力に便利な「Datepicker for Bootstrap」

「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot

no image

ファイルアップロードフォーム プラグイン

Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h

ページ内のフォントサイズを変更してくれる「Text Resizer」

「jQuery Text Resizer Plugin」は、ページ内のフォントサイズを変更してくれるjQueryプラグインです。要素を限定してリサイズすることも可能です。jquery.cookie.j

Bootstrap Modal + 拡張機能が実装できるプラグイン

Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 2014/06/16 Bootstrap3対応版に書き換えをしました。

カウントダウン プラグイン

FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd

レスポンシブにも対応したカレンダーを表示する「Calendario.js」

Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready

no image

時刻入力に便利な「Timepicker for Bootstrap」

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え

わずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」

サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。 ダウンロード 画像とし

「jqPlot」 カスタマイズ

以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし

画像ズーム プラグイン

画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。

Comment

  1. うん、できそう。やってみます!ありがとう。わかんないところがあったら教えてねw RT @kk1126 JQuery使うと簡単かもですよ! http://kwski.net/jquery/1026/

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

PAGE TOP ↑