レスポンシブ対応したモーダルウィンドウのプラグインのまとめ
こんにちは、工藤です。 今回は以前まとめたものが古かったので、jQueryを使ったモーダルウィンドウのプラグインを改めてまとめました。 レスポンシブ対応しているもののみに絞っています。 Boxer（Lightbox） DEMO GitHub（Boxer） GitHub（Lightbox） 以前までは『Boxer』というプラグイン単体だったのですが『Formstone』というテーマの1つになり、それに伴い『Lightbox』という名前に変更になったようです。ややこしいです。 ただ比較しても挙動は（見た限りだと）そんなに違わないので好きな方を使ってよいかと思います。 『Boxer』の方が設置は簡単です。 このプラグインのいいところはレスポンシブに対応している、かつスマートフォンで見た場合には最適化して表示してくれるところです。 こんな感じにきれいに表示してくれるので重宝しています。 動画やイン
jQuery 簡単にモーダルウィンドウを実装する方法 (プラグイン不要) | Stronghold Archive
どうもこんばんは。今回は【簡単にモーダルウィンドウを実装する方法 (プラグイン不要)】というネタです。モーダルウィンドウ？という方もいるかと思いますので別の言い方をするとポップアップで小窓が出てくる表現の事を指します。実装方法はとても簡単ですので機会がありましたらお試しください。 コード（2013/4/11更新しました） 基本的には下図の用な仕様になっております。表示するコンテンツを増やす場合にはコピー&ペーストでwd2,wd3…と任意の数にしてください。 $(function(){ $(‘.btns’).click(function(){ wn = ‘.’ + $(this).data(‘tgt’); var mW = $(wn).find(‘.modalBody’).innerWidth() / 2; var mH = $(wn).find(‘.modalBody’).innerHei
SimpleModal | 設置サンプル
確認アラートをモーダル表示 JavaScriptのconfirm関数を上書きするモーダルダイアログです。 設置サンプルのソース <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv=
ページのアクセス時にモーダル（フロート）を表示するjQuery.layerBoard.js | FEVDES BLOG
「セール情報」や「重要なお知らせ」を、 モーダル（フロート）で目立たせたいという要望があったので、 ページのアクセス時にモーダル（フロート）を表示するjQueryプラグインを制作しました。 「jquery.layerBoard.js」は商用利用・改変・再配布可能です。 デモ トップページのアクセス時にモーダルを表示させるプラグイン。 ダウンロード：layerboard.zip【111KB】 デモをみる 次にアクセスしても指定した時間までひらきません。 デフォルトでは1分で、再びひらくようになっています。 再びひらくまでの時間は分単位で指定できます。 必要なファイル 必要なのは jQuery jquery.cookie.js jquery.layerBoard.js jQueryとjquery.cookie.jsはサイトからダウンロードしてください。 jquery.layerBoard.js
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
