モーダルを開いている時にページがスクロールしてしまうのを防ぐCSSとJavaScriptのテクニック
ページ上でモーダルを開き、スクロールして、モーダルを閉じると、通常そのページはモーダルを開いた時とは別の場所にスクロールされた状態で表示されてしまいます。そして、スクロールした状態で、モーダルを開いて閉じると、一番上にスクロールされた状態で表示されてしまいます。 これらを解決するCSSとJavaScriptのテクニックを紹介します。 Prevent Page Scrolling When a Modal is Open 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 簡単なことから始めましょう スマホの場合 この問題を解決するにはJavaScriptが必要 JavaScriptで問題を解決する はじめに モーダルを開いて、スクロールして、モーダルを閉じます。すると、そのページはモーダルを開いた時とは別の場所にスクロール
Light Modal - 100% Pure CSS Modal with Animations
Install via npm npm install light-modal Or Download the Zip and include dist/css/light-modal.min.css in your page head. Modal Markup: <div class="light-modal" id="unique-id" role="dialog" aria-labelledby="light-modal-label" aria-hidden="false"> <div class="light-modal-content animated zoomInUp"> <!-- light modal header --> <div class="light-modal-header"> <h3 class="light-modal-heading">Modal Titl
【jQuery】指定したアニメーションでモーダルウィンドウが表示される［animatedModal.js］の使い方
指定した様々なアニメーションでモーダルウィンドウを表示するjQueryプラグイン［animatedModal.js］の使い方を紹介します。 まずはサンプルをどうぞ。 DEMO : https://on-ze.com/demo/jquery-animatedmodal.js/ ポップアップするモーダルウィンドウ部分は基本的に全画面表示になり、PCはもちろん、タブレット端末やiPhone等のスマホなど、表示領域が狭いデバイスでも有効的に使えそうですね。 アニメーション部分は［animate.css］に依存していますが、その指定はスクリプト側で行えばOK。特に複雑な設定はないので比較的お手軽に導入できます。 ［animatedModal.js］の実装方法ファイルの入手と準備最初に必要なファイルをダウンロードします。 ダウンロードは公式サイトからどうぞ。 animatedModal.js : ht
実装が簡単で、動作も快適！CSSのみで実装されたアニメーションも気持ちいいモーダルボックス- Light Modal
一昔前までは、完全にJavaScriptの領域でした。 IE9+を含む、すべてのモダンブラウザで動作する、CSSで実装されたモーダルボックスを紹介します。 非常に軽量なので動作も快適、そして実装も簡単と3拍子揃ったスタイルシートです。
JavaScriptモーダルウインドウプラグイン「Best Free JavaScript Modal Window Plugins」
TOP > plugin > JavaScriptモーダルウインドウプラグイン「Best Free JavaScript Modal Window Plugins」 Webサイトを閲覧していると様々なモーダルウィンドウを見かけると思います。使用用途はもちろん、デザインも様々。そんな中今回は、デベロッパーにとって便利な、JavaScriptモーダルウインドウプラグイン「Best Free JavaScript Modal Window Plugins」を紹介します。 SweetAlert2 – a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes モーダル制作に便利なオープンソースが集約されたまとめとなっています。いくつか気になる
Web制作者は要チェック！モーダルダイアログをアクセシブルに実装する超軽量スクリプト -Micromodal.js
ちょうどいいモーダルってなかなか見つからないんだよな、と探している人は要チェックです。シンプルで操作性もよく、アクセシブルに実装する超軽量の単体で動作するJavaScriptのライブラリを紹介します。 WAI-ARIAガイドラインに準拠したモーダルダイアログを実装。 1.9kbの超軽量のJavaScriptライブラリ。 aria属性でモーダルの開閉を切り替える。 オーバーレイをクリックすると、モーダルを閉じる。 escボタンを押すと、モーダルを閉じる。 モーダル内のタブをフォーカス。 モーダル内の最初のフォーカス可能な要素にフォーカスを合わせる。 モーダルを閉じた後、フォーカスされた要素の状態を保持。 Micromodal.jsのデモ デモでは実際の動作を楽しめます。 モーダルを閉じるトリガーは、Closeボタン、Xボタン、オーバーレイのクリック、escボタンが用意されています。
レスポンシブで小気味の良いアニメーションが特徴的なモーダル「IZIMODAL」
WEBサイトでも頻繁に利用されるモーダルウィンドウ。詳しく情報を表示したり、アラート的に利用したり、コンタクトフォームなどで利用したりなど様々な使い方が可能ですが、今回紹介するのはレスポンシブで小気味の良いアニメーションが特徴的なモーダル「IZIMODAL」です。 モーダルウィンドウとしての機能は一般的なものですが、モーダル内のオブジェクトが細かく動作しクオリティが高い印象を与えてくれるモーダルウィンドウです。 詳しくは以下 Ajaxなど非同期でも利用することができ、組み込みもシンプルなコードで基本的にはjsを読み込ませてclassを付与するだけで実装ができる形になっております。加えて下記のようにオプションも予めパラメーターが用意されているので、かなり細かい所まで簡単にカスタマイズすることができそうです。 ライセンスはApache Licenseとなっており、「iziModal.js」から
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
シンプルデザインのモーダル実装「PIGNOSE Popup」:phpspot開発日誌
ssi-modal