Web制作者は要チェック！モーダルダイアログをアクセシブルに実装する超軽量スクリプト -Micromodal.js
ちょうどいいモーダルってなかなか見つからないんだよな、と探している人は要チェックです。シンプルで操作性もよく、アクセシブルに実装する超軽量の単体で動作するJavaScriptのライブラリを紹介します。 WAI-ARIAガイドラインに準拠したモーダルダイアログを実装。 1.9kbの超軽量のJavaScriptライブラリ。 aria属性でモーダルの開閉を切り替える。 オーバーレイをクリックすると、モーダルを閉じる。 escボタンを押すと、モーダルを閉じる。 モーダル内のタブをフォーカス。 モーダル内の最初のフォーカス可能な要素にフォーカスを合わせる。 モーダルを閉じた後、フォーカスされた要素の状態を保持。 Micromodal.jsのデモ デモでは実際の動作を楽しめます。 モーダルを閉じるトリガーは、Closeボタン、Xボタン、オーバーレイのクリック、escボタンが用意されています。
10 Must have Lightbox Libraries For Mobile Responsiveness
In this day and age, responsive websites are in demand which gives rise to another dimension of web development called mobile development where developers are specifically focusing on creating mobile responsive websites. There are plenty of resources used for this purpose and one of them is Lightbox libraries. Lightbox is the popular way to overlay images on the web and many web developers are usi
[CSS]これから増えてきそうなMaterial Designにぴったり！気持ちいいアニメーションで表示させるモーダルコンテンツ
デモのアニメーションGIF 実装 HTML デモページの中央のセクション（背景グリーンの箇所）のHTMLです。 <section class="cd-section"> <!-- テキスト --> <div class="cd-modal-action"> <a href="#0" class="btn" data-type="modal-trigger">Fire Modal Window</a> <span class="cd-modal-bg"></span> </div> <div class="cd-modal"> <div class="cd-modal-content"> <!-- モーダルコンテンツ --> </div> </div> <a href="#0" class="cd-modal-close">Close</a> </section> ボタン、モーダルコンテンツ
![[CSS]これから増えてきそうなMaterial Designにぴったり！気持ちいいアニメーションで表示させるモーダルコンテンツ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c3e2b74f52cf5d4d27ac9771e327796cadcfbf24/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015020206.png)
[JS]スマホやタブレットのタッチデバイスでの操作がめちゃ快適な画像ギャラリーのスクリプト -PhotoSwipe
サポートするタッチジェスチャーの一覧 PhotoSwipeの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <!-- Core CSS file --> <link rel="stylesheet" href="path/to/photoswipe.css"> <!-- Skin CSS file (optional) --> <link rel="stylesheet" href="path/to/default-skin/default-skin.css"> <!-- Core JS file --> <script src="path/to/photoswipe.min.js"></script> <!-- UI JS file --> <script src="path/to/photoswipe-ui-default.min.j
![[JS]スマホやタブレットのタッチデバイスでの操作がめちゃ快適な画像ギャラリーのスクリプト -PhotoSwipe](https://cdn-ak-scissors.b.st-hatena.com/image/square/d65d654192b6c35de8b5e9ca6ebde66452cbfe56/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014121601.png)
jQuery-plainModal
Download TAR.GZDownload ZIPView on GitHub Recommend: PlainModal instead of "jQuery-plainModal" No dependency, Modern browsers supported, Lightweight & Single file, and more features The simple jQuery Plugin for fully customizable modal windows. plainModal has basic functions only, and it does not style. It has no image files and no CSS files. Just one small file. Open Sample jQuery.plainModal Not
レスポンシブWebデザインに対応したモーダルウィンドウを実装するjQueryプラグイン・Remodal
RWD対応のモーダルウィンドウを実装するスクリプト、Remodalのご紹介です。jQueryに依存しています。 RWDなWebサイトで使えるモーダルウィンドウ実装スクリプトです。 デバイスのモニタサイズに応じて適切なレイアウトを維持するモーダルウィンドウです。 スマフォの場合は全画面に表示されるのでフィンガーフレンドリーを考慮した設計と言えそうです。 <script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.remodal.min.js"></script>本体とスクリプトを読み込みます。 <div class="remodal" data-remodal-id="modal" data-remodal-options='{ "
VenoBox 2 - modal window javascript plugin, touch swipe gallery
VenoBox 2 Just another jQuery Vanilla JS Lightbox plugin, suitable for Images, Videos, Inline contents, iFrames, Ajax requests. The big difference compared to many others modal-window plugins is that VenoBox calculates the max width of the image displayed and preserves its height if is taller than the window. (so in small devices you can scroll down the content, avoiding vertical microscopic resiz
[JS]コンテンツを効果的にナビゲートするjQueryのプラグインのまとめ
スマフォ・タブレットでよく見かける三本線のナビゲーションをはじめ、コンテンツをスライドしてかっこいいアニメーションで表示されるサイドバー、1ページで構成されたサイト用のナビゲーションなど、あなたの大切なコンテンツを効果的にナビゲートするjQueryのプラグインを紹介します。
[JS]Pinterestやウォールなどの最近よく見かけるカードを使ったレイアウトを作成するスクリプト -Freewall
Demo :Piterest Layout Pinterest風に高さの異なるカードをダイナミックにレイアウト。 Freewallの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.7.min.js"></script> <script type="text/javascript" src="freewall.js"></script> </head> Step 2: HTML カードを包むラッパーを用意します。 <div id="freewall" class="free-wall"> </div> Step 3: JavaScript デモでは、各カードをスクリプトで生成してレイアウトを作成しています。 <sc
IE8以上ならもうスクリプト無しでOKのモーダルウインドウを表示するスタイルシート -CSS Modal
テキストや画像などのリンクをクリックすると、画像をはじめあらゆるHTMLの要素が配置可能なモーダルウインドウを表示するスタイルシートを紹介します。 CSS Modal CSS Modal -GitHub CSS Modalのデモ CSS Modalの使い方 CSS Modalのデモ デモはIE9を含む、すべての最新のモダンブラウザでご覧ください。モバイル系は、iOS, Android2/3/4のMobile Safariで非常に機能し、Windows Phone8でも機能します。 IE7以下は非サポートで、IE8はエフェクトなしで機能します。 まずは、テキストを配置したモーダルウインドウから。 Modal Text モーダルウインドウ内にトリガーを設定することも可能で、「Open a new modal」をクリックすると別のウインドウが開きます。 ウインドウを閉じるには、右上のクローズをク
Swipebox | A touchable jQuery lightbox
What is Swipebox ? Swipebox is a jQuery "lightbox" plugin for desktop, mobile and tablet. Main Features Swipe gestures for mobile Keyboard Navigation for desktop CSS transitions with jQuery fallback Retina support for UI icons Easy CSS customization Basic Usage Javascript Include jquery and the swipebox script in your head tags or right before your body closing tag. <script src="lib/jquery-2.0.3.j
タッチデバイスにも対応したシンプルなLightboxを実装するjQueryプラグイン・Swipebox
タッチデバイスに対応したLightboxを実装するスクリプトのご紹介です。jQueryに依存します。多機能なものではありませんが、使いやすくて良さそうです。ただ、実機での動作テストをしていませんのでその程度の記事。 タッチデバイスで使えるLightboxです。 見易くていいかも。CSSでカスタマイズできるらしいのでMedia Queriesを使うだけで対応できるなら楽でいいかも。 スマフォのスクショです。 $(".foo").swipebox();使い方はいつも通り。 <a href="big/bar.jpg" class="foo" title="My Caption"> <img src="small/bar.jpg" alt="image"> </a>マークアップもclassを振るだけ。 詳細は以下で確認できます Swipebox
Bootstrap向けの汎用的なモーダルボックス実装スクリプト・Bootstrap Modal
よさ気だったのでメモ。Twitter Bootstrap向けのモーダルスクリ プト、Bootstrap Modalです。既存 のモーダルクラスの代替、または パッチとして利用出来る、との事 です。 Bootstrap向けのモーダルスクリプトです。レスポンシブ対応でスタックも可能との事です。デモを触って見ましたが結構使い勝手が良さそうでした。 こういうやつ。モーダルボックス内は自由にマークアップできます。Bootstrap用なので勿論レスポンシブにも対応しています。 このようにモーダルを表示したまま、別のモーダルボックスを呼び出すことも出来ます。 汎用性も高そうです。これは覚えておこう・・・時間が作れなかったのでコードやサンプルは割愛しました。貧乏暇無し。 Bootstrap Modal
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]モーダルウインドウの実装を検討する時はこのスクリプトもチェック！ -vex
Fluidbox, a jQuery plugin for beautiful lightboxes
http://tosrus.frebsite.nl/
[JS]古いブラウザではそれなりに、モダンブラウザではよりかっこよく表示する通知パネルのスクリプト -smoke.js