私がよく使っているjQueryプラグインまとめ（スライダー、モーダルウィンドウなど） | OZPAの表4

2014/08/06 611 users jQuery シンプ カルーセルスライダー OZPA 必須

こんにちは、暑いですね。脇汗すごいですね。僕が。 さて今回はWebページ作成時に、私がよく使っているjQueryプラグインをまとめてみました。（たまにjQueryが必須でないものもあります。） ※紹介しているプラグインを使用する際、ライセンスは各自で再度確認してくださいませ。 Owl Carousel 個人・商用利用可能。レスポンシブでいい感じに動作してくれるカルーセルスライダーです。動作もシンプ... 続きを読む

Webデザインでよく使うUI要素の名称・用語一覧 - Qiita

2016/11/25 494 users Qiita modal ダイアログ UI要素 名称

Overview Webサイトを作っているとよく出てくるUIの名称を、ざっくばらんにまとめました。 人や会社ごとで固有の呼び方があると思いますが、自分の場合こんな感じです。 コミュニケーション円滑にな〜れ ポップアップ表示系 ▼ アラート JSのalertかブラウザのデフォ機能で出るやつ。ダイアログとも。 ▼ モーダルウィンドウ 閲覧中のページにカバーを重ねて表示させるやつ。 modalは「ページ... 続きを読む

初心者でも分かる！な「モーダルウィンドウ」の作り方 - Syncer

2014/06/26 347 users jQuery Syncer HTML ウィンドウ 中身

1モーダルウィンドウのコンテンツ部分を作ろう！ まずはモーダルウィンドウで表示されるコンテンツを作成していきます。「モーダルウィンドウを表示してくれてありがとう！」というメッセージ(ウィンドウ)を表示させてみましょう。 1-1デザインを用意する 用意したサンプルが、下記のウィンドウです。この記事を通して、jQueryが正常に動くのを確認してから、中身をカスタマイズして下さいね！ HTML HTML... 続きを読む

[JS]超軽量だけど、高性能なモーダルウインドウを実装するスクリプト -TinyBox2 | コリス

2011/03/30 191 users コリス クローズボタン スクリプト jQuery 超軽量

jQueryなどの他のスクリプトに依存せずにモーダルウインドウを実装する高性能で超軽量（5KB）のスクリプトを紹介します。TinyBox2のデモデモはシンプルなモーダルウインドウから、アニメーション付き、AJAX対応、iFrame対応、画像対応などがあり、どれも実用的なものとなっています。 ウインドウをクローズする際はクローズボタン、もしくはウインドウ外のクリック、「ESC」キーの操作に対応してい... 続きを読む

[JS]機能も充実、設置も簡単、デザインも素敵！モーダルウインドウを実装する超軽量のスクリプト -Pop Easy | コリス

2013/06/06 166 users コリス jQuery easy キャプチャ スクリプト

Pop Easyはテキストや画像、フォーム、動画、Google Mapsなどを配置できるモーダルウインドウを実装するjQueryのプラグインで、モーダルウインドウ自体の機能・デザイン性も優れていますが、ページのデザインもかっこいいのはなかなか出会うことが少ないです。 下記のキャプチャだけでも、そのデザインにワクワクする人が多いと思います。 Pop Easy Pop Easyのデモ Pop Easy... 続きを読む

[JS]a要素にclassを加えるだけで別窓や印刷、ページ内アンカーへのスクロールなどの機能を加えるスクリプト -jQuery A+ | コリス

2014/03/18 155 users コリス jQuery XHTML class スクロール

HTML5でもXHTMLのどちらでもvalidなHTMLで、a要素にclassを加えるだけでリンクを別窓で開いたり、モーダルウインドウを表示したり、通知パネルを表示したり、ページ内アンカーへアニメーションでスクロールさせたり、ページの印刷ボタンとして機能したりなど、a要素にさまざまな機能を加えるjQueryのプラグインを紹介します。 jQuery A+ jQuery A+ -GitHub jQue... 続きを読む

[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js | コリス

2015/03/04 150 users コリス jQuery スクリプト アニメーション プラグイン

最近のUIの傾向として、ユーザーが操作して楽しくなるようなアニメーションは大切なポイントです。そんな気持ちいいCSS3のアニメーションでモーダルウインドウをページ全体に表示するjQueryのプラグインを紹介します。 横からアニメみたいにひゅっとスライドさせたり、ぼい～んとバウンドさせたり、気持ちよくて面白いものが簡単に実装できます。 animatedModal.js animatedModal.j... 続きを読む

シンプルイズベスト！おしゃれなモーダルウィンドウを実装出来る「SIMPLE MODAL」 | 株式会社LIG

2013/02/12 150 users ALE シンプルイズベスト Simple Modal デモ

お疲れ様です、ももこです。 おしゃれなWebサイトでコンテンツの表示に、モーダルウィンドウを使うと格好よく映えたりしますよね。 今回はクールなモーダルウィンドウを簡単に設置出来るJavaScript「SIMPLE MODAL」をご紹介したいと思います。 「SIMPLE MODAL」 デモ 用意されているデモは全部で8種類あります。 その中でも特に使用頻度が高そうな5つのデモをご覧ください。 ALE... 続きを読む

IE8以上ならもうスクリプト無しでOKのモーダルウインドウを表示するスタイルシート -CSS Modal | コリス

2013/05/13 146 users コリス iOS スクリプト無し モダンブラウザ 配置

テキストや画像などのリンクをクリックすると、画像をはじめあらゆるHTMLの要素が配置可能なモーダルウインドウを表示するスタイルシートを紹介します。 CSS Modal CSS Modal -GitHub CSS Modalのデモ CSS Modalの使い方 CSS Modalのデモ デモはIE9を含む、すべての最新のモダンブラウザでご覧ください。モバイル系は、iOS, Android2/3/4のM... 続きを読む

[JS]ドラッグで移動も可能なモーダルウインドウを作成する軽量スクリプト -Simple Modal | コリス

2011/12/05 127 users コリス Simple Modal ドラッグ 軽量スクリプト

アラート、コンファームだけでなく、AJAXコンテンツ、画像、動画など表示するモーダルウインドウを実装するスクリプトを紹介します。 Simple Modalの特徴 Simple Modalのデモ Simple Modalの実装 Simple Modalのダウンロード Simple Modalの特徴 モーダルウインドウを簡単に生成します。 生成したモーダルウインドウは、ドラッグ操作で移動可能です。 コ... 続きを読む

どれ使おう？モーダルウィンドウ（Lightbox 風スクリプト）を集めてみました | バシャログ。

2012/04/05 124 users lightbox バシャログ

この間の春の嵐はすごかったですね。いろいろ飛ばされないように必死だった kimoto です。帰りの電車は久々に足が浮くほどの超満員を経験しました。 さて、ちょっとモーダルウインドウを調べる機会があったのでまとめてみます。 基本的に、全て jQuery で動くものになっています。 最新の情報ってわけではないですが、場面ごとに選べるものを集めてみたのでお試しくださいませ。 超シンプルな軽量スクリプト ... 続きを読む

レスポンシブWebデザインに対応したモーダルウィンドウを実装するjQueryプラグイン・Remodal - かちびと.net

2014/03/07 96 users jQuery RWD対応 スクリプト script src

RWD対応のモーダルウィンドウを実装するスクリプト、Remodalのご紹介です。jQueryに依存しています。 RWDなWebサイトで使えるモーダルウィンドウ実装スクリプトです。 Remodal デバイスのモニタサイズに応じて適切なレイアウトを維持するモーダルウィンドウです。 スマフォの場合は全画面に表示されるのでフィンガーフレンドリーを考慮した設計と言えそうです。 <script src="ht... 続きを読む

[CSS]モーダルウインドウをシンプルな操作とアニメーションでどれだけかっこよく表示できるかのデモ | コリス

2013/06/26 93 users コリス エフェ CSS アニメーション Opera

トリガーはシンプルなクリック操作、そしてシンプルなアニメーションを使って、モーダルウインドウをいかにかっこよく表示するかのデモンストレーションを紹介します。 NIFTY MODAL WINDOW EFFECTS デモはCSS3アニメーションを使用しているので、Chrome, Safari, Firefox, Operaなどのモダンブラウザでご覧ください。 デモページ デモは、全部で19種類のエフェ... 続きを読む

[JS]モーダルウインドウを設置するスーパーシンプルなスクリプト -leanModal | コリス

2011/07/05 89 users コリス ログインフォーム jQuery スクリプト プラグイン

モーダルウインドウを設置する必要最小限のカスタマイズを備えた超軽量のjQueryのプラグインを紹介します。 デモページ：サインアップフォーム leanModalの主な特徴 モーダルウインドウが簡単に実装できます。 超軽量（780バイト）です。 幅と高さをカスタマイズできます。 画像は使用しません。 1ページに複数のモーダルボックスを設置できます。 ログインフォーム、サインアップフォーム、アラートパ... 続きを読む

[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js | コリス

2015/04/21 86 users コリス トリガー スクリプト アクション アニメーション

最近のWebページで人気があるのは、ビジュアルの連続性。 パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで表示される超軽量（1.2KB）スクリプトを紹介します。 モーダルウインドウとサイドバーのデモ コマを落としているので分かりにくいですが、ボタンをクリックすると... 続きを読む

[JS]モーダルウインドウの実装を検討する時はこのスクリプトもチェック！ -vex | コリス

2014/02/12 72 users vex jQuery コリス ウィンドウ スクリプト

カスタマイズ性に優れ、シンプルなものからカラフルなものまでさまざまなテーマも用意されており、簡単に実装できる超軽量（6KB）のjQueryのプラグインを紹介します。 レスポンシブ対応、IE8+もサポート、ウインドウを表示する際のアニメーションも優雅でいい感じ！ vex vex -GitHub vexのデモ vexの使い方 vexのデモ デモではvexのさまざまなスタイルをショー形式で楽しむことがで... 続きを読む

jQueryで様々なエフェクトのモーダルウィンドウを実装出来る『jQuery Custombox』 | バンクーバーのうぇぶ屋

2013/10/08 66 users jQuery ダイアログ バンクーバー 呼び名 エフェクト

『モーダルウィンドウ』って呼び名って一般的なんでしょうか？なんて言ったら良いかわからなかったので、そのままモーダルウィンドウってタイトルには書きましたが、ダイアログみたいな感じでコンテンツ表示される奴のことです（笑）！ 最近は海外ブログなんかでも見ることがあるくらい、使われているサイトを良く見ますが、結構これ実装するときって頭悩ませる所…。今日はそんなモーダルウィンドウを表示するときにちょっと便利... 続きを読む

モーダルウィンドウはやめて！モバイルで最適なUIとは？ | UX MILK

2015/07/28 57 users フラストレーション モバイルサイト UX Movement

この記事はUX Movementの許可を得て翻訳転載しています。 翻訳元記事：UX Movement - Why You Should Avoid Using Modal Windows on Mobile (2015-01-27) モバイルサイトで最もフラストレーションのたまるユーザー体験の一つとしてモーダルウィンドウが挙げられます。PCサイトでは画面サイズが大きいので、モーダルウィンドウの表示... 続きを読む

[CSS]モーダルウインドウをCSS3アニメーションを使ってエレガントに表示するチュートリアル | コリス

2012/04/12 56 users コリス ズームアウト ズームイン チュートリアル CSS

モーダルウインドウを表示する際、CSS3アニメーションでズームイン・アウトさせるチュートリアルを紹介します。 デモページ：ズームアウト 実装 HTML div要素でモーダルウインドウを作成し、ページ全体を覆うオーバーレイのdiv要素で内包します。 <div class="overlay-container"> <div class="window-container zoomin"> <h3>He... 続きを読む

動画やGoogleマップにも対応した軽量なモーダルウィンドウを実装するjQueryプラグイン・Pop Easy - かちびと.net

2013/06/06 52 users Trigger modal jQuery easy スクリプト

使いやすそうなモーダルウィンドウのスクリプトがあったので備忘録。VimeoやGoogleマップにも対応しており、ファイル自体も圧縮版で2KB程度と軽量なのも嬉しいですね。 モーダルウィンドウ実装用のスクリプトです。jQueryに依存します。 Pop Easy 使いやすそうなモーダルウィンドウです。 スタイルもカスタマイズしやすそう。 $('.modalLink').modal({ trigger:... 続きを読む

Bootstrapのモーダルウィンドウを拡張する『Bootstrap Modal v2.0』 | IDEA*IDEA

2012/11/22 47 users モーダル jsc Ajax Bootstrap IDEA

Bootstrapのモーダルウィンドウを拡張したライブラリですな。複数のウィンドウだせたり、Ajaxでコンテンツを読み込んだりとか。地味に「バックグラウンドをスクロールさせない」とか便利そう。 ↑ Responsive Designに対応。画面を狭くすると1カラムになります。 ↑ モーダルの上にモーダル重ねたりとか。 Bootstrapよく使う人はいかがですかね。詳細は以下からどうぞ。 » jsc... 続きを読む

[JS]不可視のDOMをコントロールしてUIを拡張するスクリプト -Shadow UI | コリス

2013/09/16 45 users コリス DOM extensions スクリプト jQuery

ドロップダウン、モーダルウインドウ、ポップアップ、ツールチップなど、最初は可視状態にないDOMをコントロールしてUIを拡張するjQueryのプラグインを紹介します。 「Shadow DOM besed UI extensions」って表現するセンス、いいですね。 Shadow UI Shadow UI -GitHub Shadow UIのデモ Shadow UIの使い方 Shadow UIのデモ ... 続きを読む

こんな無料素材があったとは！ページの背景いっぱいに表示するアニメーションの動画素材 -Vidlery | コリス

2017/01/31 39 users コリス DOWNLOAD Step アニメーション サーバー

Vidleryのアニメーション素材 Vidleryの使い方 Step 1: アニメーションのダウンロード 各アニメーションをクリックすると、モーダルウインドウが表示されるので、「Download」をクリックしてダウンロードします。 「Download」をクリック Step 2: ファイルのアップロード ダウンロードしたファイルを解凍し、ファイルをすべて利用するサーバーにアップロードします。 .jp... 続きを読む

成長を続けるTwitter Bootstrapのエコシステム

2012/12/20 27 users Twitter Bootstrap エコシステム 成長 一方

Bootstrap HeroがTwitter Bootstrapの200を超えるリソースのリストをローンチした。このカタログにはアコーディオンやアドレスピッカーから、ページネーションツールやより強力なモーダルウィンドウまで、幅広いUIウィジットが掲載されている。また一方で、このエコシステムがいかに広範囲に及んできているかを示す、さまざまなリソースも含まれている。 また、Microsoft ASP.... 続きを読む

tmlib.js でモーダルウィンドウを作ってみた | TM Life

2012/12/02 24 users tmlib.js イベントリスナ Element DOM 操作

tmlib.js には tm.dom.Element というクラスが定義されており, これを使うことで様々な DOM 操作を行うことができます. 今回はそのサンプルとして tmlib.js でモーダルウィンドウを作ってました. サンプルは jsdo.it で作成しております. Table of contents サンプルについて ソースコードの解説 DOM 要素をクエリで取得 イベントリスナをさく... 続きを読む