タグ モーダルウインドウ
人気順 5 users 10 users 50 users 500 users 1000 usersWebデザインでよく使うUI要素の名称・用語一覧 - Qiita
Overview Webサイトを作っているとよく出てくるUIの名称を、ざっくばらんにまとめました。 人や会社ごとで固有の呼び方があると思いますが、自分の場合こんな感じです。 コミュニケーション円滑にな〜れ ポップアップ表示系 ▼ アラート JSのalertかブラウザのデフォ機能で出るやつ。ダイアログとも。 ▼ モーダルウィンドウ 閲覧中のページにカバーを重ねて表示させるやつ。 modalは「ページ... 続きを読む
[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js | コリス
最近のUIの傾向として、ユーザーが操作して楽しくなるようなアニメーションは大切なポイントです。そんな気持ちいいCSS3のアニメーションでモーダルウインドウをページ全体に表示するjQueryのプラグインを紹介します。 横からアニメみたいにひゅっとスライドさせたり、ぼい~んとバウンドさせたり、気持ちよくて面白いものが簡単に実装できます。 animatedModal.js animatedModal.j... 続きを読む
私がよく使っているjQueryプラグインまとめ(スライダー、モーダルウィンドウなど) | OZPAの表4
こんにちは、暑いですね。脇汗すごいですね。僕が。 さて今回はWebページ作成時に、私がよく使っているjQueryプラグインをまとめてみました。(たまにjQueryが必須でないものもあります。) ※紹介しているプラグインを使用する際、ライセンスは各自で再度確認してくださいませ。 Owl Carousel 個人・商用利用可能。レスポンシブでいい感じに動作してくれるカルーセルスライダーです。動作もシンプ... 続きを読む
初心者でも分かる!な「モーダルウィンドウ」の作り方 - Syncer
1モーダルウィンドウのコンテンツ部分を作ろう! まずはモーダルウィンドウで表示されるコンテンツを作成していきます。「モーダルウィンドウを表示してくれてありがとう!」というメッセージ(ウィンドウ)を表示させてみましょう。 1-1デザインを用意する 用意したサンプルが、下記のウィンドウです。この記事を通して、jQueryが正常に動くのを確認してから、中身をカスタマイズして下さいね! HTML HTML... 続きを読む
[JS]a要素にclassを加えるだけで別窓や印刷、ページ内アンカーへのスクロールなどの機能を加えるスクリプト -jQuery A+ | コリス
HTML5でもXHTMLのどちらでもvalidなHTMLで、a要素にclassを加えるだけでリンクを別窓で開いたり、モーダルウインドウを表示したり、通知パネルを表示したり、ページ内アンカーへアニメーションでスクロールさせたり、ページの印刷ボタンとして機能したりなど、a要素にさまざまな機能を加えるjQueryのプラグインを紹介します。 jQuery A+ jQuery A+ -GitHub jQue... 続きを読む
[JS]機能も充実、設置も簡単、デザインも素敵!モーダルウインドウを実装する超軽量のスクリプト -Pop Easy | コリス
Pop Easyはテキストや画像、フォーム、動画、Google Mapsなどを配置できるモーダルウインドウを実装するjQueryのプラグインで、モーダルウインドウ自体の機能・デザイン性も優れていますが、ページのデザインもかっこいいのはなかなか出会うことが少ないです。 下記のキャプチャだけでも、そのデザインにワクワクする人が多いと思います。 Pop Easy Pop Easyのデモ Pop Easy... 続きを読む
IE8以上ならもうスクリプト無しでOKのモーダルウインドウを表示するスタイルシート -CSS Modal | コリス
テキストや画像などのリンクをクリックすると、画像をはじめあらゆるHTMLの要素が配置可能なモーダルウインドウを表示するスタイルシートを紹介します。 CSS Modal CSS Modal -GitHub CSS Modalのデモ CSS Modalの使い方 CSS Modalのデモ デモはIE9を含む、すべての最新のモダンブラウザでご覧ください。モバイル系は、iOS, Android2/3/4のM... 続きを読む
シンプルイズベスト!おしゃれなモーダルウィンドウを実装出来る「SIMPLE MODAL」 | 株式会社LIG
お疲れ様です、ももこです。 おしゃれなWebサイトでコンテンツの表示に、モーダルウィンドウを使うと格好よく映えたりしますよね。 今回はクールなモーダルウィンドウを簡単に設置出来るJavaScript「SIMPLE MODAL」をご紹介したいと思います。 「SIMPLE MODAL」 デモ 用意されているデモは全部で8種類あります。 その中でも特に使用頻度が高そうな5つのデモをご覧ください。 ALE... 続きを読む
どれ使おう?モーダルウィンドウ(Lightbox 風スクリプト)を集めてみました | バシャログ。
この間の春の嵐はすごかったですね。いろいろ飛ばされないように必死だった kimoto です。帰りの電車は久々に足が浮くほどの超満員を経験しました。 さて、ちょっとモーダルウインドウを調べる機会があったのでまとめてみます。 基本的に、全て jQuery で動くものになっています。 最新の情報ってわけではないですが、場面ごとに選べるものを集めてみたのでお試しくださいませ。 超シンプルな軽量スクリプト ... 続きを読む
[JS]ドラッグで移動も可能なモーダルウインドウを作成する軽量スクリプト -Simple Modal | コリス
アラート、コンファームだけでなく、AJAXコンテンツ、画像、動画など表示するモーダルウインドウを実装するスクリプトを紹介します。 Simple Modalの特徴 Simple Modalのデモ Simple Modalの実装 Simple Modalのダウンロード Simple Modalの特徴 モーダルウインドウを簡単に生成します。 生成したモーダルウインドウは、ドラッグ操作で移動可能です。 コ... 続きを読む
[JS]超軽量だけど、高性能なモーダルウインドウを実装するスクリプト -TinyBox2 | コリス
jQueryなどの他のスクリプトに依存せずにモーダルウインドウを実装する高性能で超軽量(5KB)のスクリプトを紹介します。TinyBox2のデモデモはシンプルなモーダルウインドウから、アニメーション付き、AJAX対応、iFrame対応、画像対応などがあり、どれも実用的なものとなっています。 ウインドウをクローズする際はクローズボタン、もしくはウインドウ外のクリック、「ESC」キーの操作に対応してい... 続きを読む