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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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... 続きを読む

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

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

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

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

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

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

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

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

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

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

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

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