セレクトボックスをモーダルウィンドウで選択できるjQueryプラグインを作成 | キノコログ

2019/11/28 11 users セレクトボックス jQueryプラグイン 作成

WEB屋さんなら、タイトルである程度察してもらえるこの問題。 昨今のWEBサイトは、スマートフォンからのアクセスがほとんどのため、デザインや操作性はスマートフォンでストレスなく使えることが最重要課題となっている。 特に、ユーザー... 僕の作ったサイトでは、iOSのユーザーが70%を超えるほど多く、かつプロフィー... 続きを読む

モーダルウィンドウはコンバージョン率が高いという幻想 | UX MILK

2018/10/31 11 users UX Movement コンバージョン率 UX MILK

この記事はUX Movementからの翻訳転載です。配信元または著者の許可を得て配信しています。 The Conversion Rate Illusion of Modal Newsletter Forms (2017-01-10) これまでにモーダルウィンドウのメルマガ登録フォームを見たことがありますか？　世の多数のサイトで使われているので、おそらくあるでしょう。多くのサ... 続きを読む

使えるフリーのモーダルウィンドウまとめ「12 Free Modal Window Libraries & Plugins For Your Site」 | DesignDevelop

2017/12/06 12 users DesignDevelop ギャラリー 存在 機能 商品

WEBサイトの機能として欠かせない存在になりつつ在るモーダルウィンドウ。ギャラリーを閲覧させたり、商品詳細を表示させたり非常に便利な仕組みです。今回ご紹介するのはそんなモーダルウィンドウを制作する際に役立つ、フリーのモーダルウィンドウをまとめた「12 Free Modal Window Libraries & Plugins For Your Site」です。 iziModal.js シンプルなタ... 続きを読む

Bootstrap 4向けのモダンで軽量なUIキット・「Shards」 | かちびと.net

2017/11/09 11 users Bootstrap バッチ UIキット アラート CSS

Shards ShardsはBootstrap 4用のモダンで軽量なUIキットです。ナビゲーションやツールチップ、フォーム周り、モーダルウィンドウやバッヂ、アラート、ボタン、カードなどのコンポーネントが揃えられています。これらのUIの為のCSSは圧縮版で12KBほどと軽量ではありますが、Bootstrapベースなので軽量と言えるかは判断が分かれそうです。Bootstrapらしい綺麗なスタイルで良い... 続きを読む

Bulmaフレームワーク向けに作られたVue.jsベースのUIコンポーネント・「Buefy」 | かちびと.net

2017/06/11 9 users Bulma table UIコンポーネント アラート net

Buefy Buefyは Bulma フレームワーク向けに作られたVue.jsベースの軽量なUIコンポーネント集です。よく必要とされるtableやタブ、ボタン、アラートやモーダルウィンドウ、フォーム周りなど一通り揃えられています。BulmaもVue.jsもモダンな印象でユーザーも多そうですね。Vue.jsは個人的にも気に入って使ってます。 Buefy Post by かちびと.net PR:WPデ... 続きを読む

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

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

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

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

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

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

モーダルウィンドウはやめて！モバイルで最適な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サイトでは画面サイズが大きいので、モーダルウィンドウの表示... 続きを読む

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

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

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

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

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

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

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

[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 ダイアログ バンクーバー 呼び名 エフェクト

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

[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のデモ ... 続きを読む

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

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

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

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

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

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

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

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

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

色んなメニューやコンテンツをモーダルウィンドウで実装できるjQueryプラグイン「Pop Easy」 | bl6.jp

2013/06/06 17 users ログインフォーム jQueryプラグイン Pop Easy

お洒落で可愛らしいjQueryプラグインを見つけたのでご紹介します。ログインフォームや動画、地図などといった色んなメニューやコンテンツをモーダルウィンドウで実装することができる「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... 続きを読む

成長を続ける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 要素をクエリで取得 イベントリスナをさく... 続きを読む