モーダル ウィンドウ サンプル。 【jQuery】モーダルウィンドウ実装する超秀逸[Modaal]プラグインの使い方

初心者でも簡単!モーダルウィンドウを7分で導入する方法!

モーダル ウィンドウ サンプル

このjQueryプラグイン、モーダルウィンドウを手軽に実装したい方に超絶オススメです! まずは実際の挙動を確認してみましょう。 DEMO : 「VIEW EXAMPLE」をクリックすると、背景が暗くなり、モーダルウィンドウがフワッと浮かび上がります。 とてもスムーズな動きですね。 スクロール時に背景が固定されるのも嬉しいポイントです。 セットアップ 使い方は他のjQueryプラグインとほぼ同じ。 [jQuery]の本体ファイルと[Modaal]のデータファイルを読み込み、定められたテンプレートに則って設定項目を記述するだけです。 最初にデータファイル一式をダウンロードしましょう。 下記GitHubより「Download ZIP」をクリックしてファイルを入手します。 GitHub : ダウンロードしたZIPファイルを解凍すると、様々なフォルダやファイルが展開されますが、このうち今回使うのは「 modaal. min. js」と「 modaal. min. css」の2つ。 これらのファイルをjQuery本体ファイルと共にHTMLの適当な箇所で読み込みます。 このとき、ファイルを読み込む順番に注意が必要です。 [Modaal]はjQueryに依存しますので、先にjQueryの本体ファイルを読み込んでおかないとエラーになります。 上記サンプルコードではCDNにホストされているjQueryを読み込むように記述しています。 わざわざjQuery本体ファイルをダウンロードしたり、サーバーにアップロードする手間が省けますし、Googleが提供するCDNの高速配信を利用して、僅かながらサイトの表示速度UPに貢献します。 起動するスイッチとモーダルウィンドウを作る 続いては[Modaal]を起動させるためのスイッチになる要素と、浮かび上がるモーダルウィンドウを作り込んでいきます。 ここでは仮に、次のようなHTMLにしてみました。 スイッチ部分 Show モーダルウィンドウ これはサンプルです。 クリックするaタグのhref属性にて、表示させるモーダルウィンドウのid属性を指定すること。 またモーダルウィンドウは最初は非表示にしないといけませんから、スタイルシートで display:none;を指定しておきましょう。 最後に[Modaal]の初期設定を行います。 modal'. modaal ; 以上で最低限の設定は完了です。 これだけでも充分に使えますが、嬉しいことに[Modaal]には数多くのオプションが用意されています。 オプション設定 [Modaal]には30を超えるオプション項目が用意されています。 そのうち使用頻度が高そうなものを以下にピックアップしてみました。 そのままコピペして利用することもできますので、参考にしてみてください。 modal'. より詳しくは公式のGitHubをご覧になるのが手っ取り早いかと思います。 GitHub : モーダルウィンドウを実装する際には、本プラグインを第一候補として検討してみることをオススメします。 ぜひお試しください。

次の

小ワザ/モーダルダイアログ

モーダル ウィンドウ サンプル

Contents• モーダルウィンドウとは? 素材サイトなどを見ているとよく出てくる、会員登録を促す画像やボタンが全画面にオーバーレイして表示されるやつです。 モーダルウィンドウが表示されると、閉じるか、指定の動作を完了するまで他の操作ができないところが特徴で、この点がメリットでもあり、デメリットでもあります。 主な用途は下記になります。 ローディング ローディングが必要なコンテンツを表示する際に、ローディング中であることを伝えるために使います。 アラートやエラーメッセージ 重要な操作を行う前の確認メッセージや、ユーザーに操作ミスなどを通知するために使います。 広告や画像、動画などのコンテンツをオーバーレイ表示する 前述のとおり、会員登録を促すウィンドウで使用されます。 また、Lightboxのように画像や動画のサムネイルをクリックして、大きく表示したい場合にも使われます。 メリット ユーザーに見せたい情報だけを見せることができます。 また、モーダルウィンドウを閉じない限りは表示されるので、行動を制限することができます。 デメリット メリットがそのままデメリットになります。 画面全体を覆い、閉じるまで他の作業ができないというのは、ユーザビリティ上よくありません。 特にユーザーがストレスを感じるのは、ページがロードされると自動で表示されるモーダルウィンドウの広告です。 これは正直、何度も続くとイラッとします。 結論 メリット・デメリット踏まえた上での私の結論ですが、クリックしてユーザーの意思で表示させるなら、メリットだけを活かせますので、私はありだと思っています。 実際かなりの頻度で使っています。 使い方としては、最近は背景動画を埋め込むことが非常に多くなりましたが、背景動画はミュートで埋め込み、音ありのバージョンをボタンクリックでポップアップさせるためによく使います。 実践で使えるものではありませんが、こんなのですよというサンプルです。 モーダルウィンドウの基本 ではベースのコードを見ていきたいと思います。 割愛していますが、「head」内でjQueryを読み込んでいますのでそちらも忘れずに。 HTML クリックでモーダルを表示 ここにモーダルウィンドウで表示したいコンテンツを入れます。 モーダルウィンドウを閉じる場合は下の「閉じる」をクリックするか、背景の黒い部分をクリックしても閉じることができます。 閉じる 3行目 a要素「js-modal-open」をクリックしたらモーダルウィンドウが表示されるように、この後のjQueryで処理していきます。 5行目 「modal」がモーダルウィンドウ全体の部分になります。 クラス名の頭に「js-」と付けているものがありますが、こちらはこの後のjQueryで操作するクラスになります。 こうしておくことで、後で見た時や、他の人が見てもすぐにjQueryで操作しているということがわかります。 12行目 モーダルウィンドウの高さをブラウザの高さと合わせるため「height: 100vh」を指定しています。 ちなみに「ボックスの高さをブラウザの高さと合わせる」テクニックは下記の記事に詳しい内容があるので、興味があれば見てみてくださいね。 チェック• 13行目 「position: abusolute」ではスクロールした際にモーダルウィンドウもスクロールされて見えなくなってしまうので「position: fixed」にして、固定表示にします。 18〜21行目 先ほどHTMLのところで書いたとおり、モーダルウィンドウを閉じるための背景要素になります。 こちらもブラウザの高さと幅に合わせています。 親要素の「modal」に「position: fixed」が指定されているので、こちらは「position: absolute」でオッケーです。 また、モーダルウィンドウがオーバレイしてることがわかりやすいように、背景色は「rgba」で半透明にしています。 25,27,28,29行目 モーダルウィンドウのコンテンツを画面の縦横センターに配置している部分になります。 いくつか他のサンプルも見てきましたが、jQueryでコンテンツの幅を取得してやっていたいりしていましたが、そんなことをしなくてもこの4行で画面の縦横センターに配置することができます。 よって下のイメージのように画面の縦横センターに配置することができます。 こちらのテクニックは下記の記事に詳しい内容があるので、こちらも興味があればぜひ見てみてください。 チェック• js-modal-open'. js-modal'. js-modal-close'. js-modal'. 「js-modal-open」をクリックしたら「fadeIn」でモーダルウィンドウを表示し、「js-modal-close」をクリックしたら「fadeOut」で非表示にしています。 4,8行目 a要素の場合は「return false」を書かないと、リンク要素として処理され、jQueryの処理ができないので注意しましょう。 応用編 ベースのモーダルウィンドウはそれほど難しくなかったと思います。 ここからはせっかくなので、いくつか応用編をやっていきたいと思います。 応用編と言っても、対して高度なことはやらないので、ここまでできた方なら問題ないと思いますので、ぜひ最後まで見ていってください。 複数のモーダル さて、ベースのモーダルウィンドウは1つだけだったのであれでよかったですが、表示したいモーダルが複数になるとこれまでのやり方ではダメなので、改良していきます。 まずはサンプルをご確認ください。 HTML クリックでモーダル1を表示 クリックでモーダル2を表示 1つ目モーダルウィンドウです。 ここにモーダルウィンドウで表示したいコンテンツを入れます。 モーダルウィンドウを閉じる場合は下の「閉じる」をクリックするか、背景の黒い部分をクリックしても閉じることができます。 閉じる 2つ目モーダルウィンドウです。 ここにモーダルウィンドウで表示したいコンテンツを入れます。 モーダルウィンドウを閉じる場合は下の「閉じる」をクリックするか、背景の黒い部分をクリックしても閉じることができます。 閉じる 3,4行目 a要素「js-modal-open」に「data-target」属性を追加しました。 この値をモーダルウィンドウのID属性とリンクさせることで、どのモーダルウィンドウを開くかわかるようにしています。 6,13行目 前述のとおり、どのモーダルウィンドウかわかるようにID属性を追加しました。 CSS CSSは変化なしです。 js-modal-open'. js-modal-close'. js-modal'. 2行目 「js-modal-open」が複数になったので、「each」メソッドの中で「this」を使うことで、どの「js-modal-open」がクリックされたかわかるようにします。 4行目 そして「data」メソッドで、クリックした「js-modal-open」の「data-target」属性を取得し、変数「target」に代入しています。 5行目 「data-target」の値はモーダルウィンドウのID属性とリンクさせているので、「document. getElementById target 」とすることで、モーダルウィンドウが複数あっても表示したいものだけ取得することができます。 では改めてサンプルです。 モーダルウィンドウを表示したままスクロールして閉じても、開いた時のスクロール位置に戻ります。 HTML クリックでモーダル1を表示 クリックでモーダル2を表示 box1 box2 box3 box4 box5 1つ目モーダルウィンドウです。 ここにモーダルウィンドウで表示したいコンテンツを入れます。 モーダルウィンドウを閉じる場合は下の「閉じる」をクリックするか、背景の黒い部分をクリックしても閉じることができます。 閉じる 2つ目モーダルウィンドウです。 ここにモーダルウィンドウで表示したいコンテンツを入れます。 モーダルウィンドウを閉じる場合は下の「閉じる」をクリックするか、背景の黒い部分をクリックしても閉じることができます。 閉じる サンプル2にスクロールができるように「box」を追加しただけです。 js-modal-open'. js-modal-close'. js-modal'. stop. 2行目 スクロール位置の値を入れる変数「winScrollTop」を宣言しています。 scrollTop 」で画面のスクロール位置(数値)が取得できますので、「js-modal-open」がクリックされたら、「winScrollTop」にスクロール位置を代入します。 15行目 「js-modal-close」がクリックされたら、取得しておいたスクロール位置まで、アニメーションさせながら移動しています。 これで開いた時と閉じた時が同じスクロール位置になりました。 動画をモーダルウィンドウで表示する 冒頭の方で紹介した動画をモーダルウィンドウで表示するサンプルのソースコードも記載しておきますので、色々遊んでみてください。 js-modal-open'. js-modal-close'. js-modal'. stop. まとめ 最後まで読んでいただいた方、お付き合いいただきありがとうございました。 モーダルウィンドウに限らずサイトにギミックを取り入れる際は、ユーザビリティも考慮して本当に必要なものを取り入れることで、ユーザーエクスペリエンスが向上するものを取り入れていきたいですね。 それでは良いWEBデザイン日和を!Have a nice WEBDESIGNDAY!

次の

モーダルウィンドウとは?設置する上での注意点と設置例

モーダル ウィンドウ サンプル

PureCSS ModalWindow 仕組みは後で解説するとして、とりあえず作ったサンプルを5つ紹介します。 一応、画面外をクリックしてウィンドウを閉じる機能にも対応していますし、ピュアCSSのモーダルウィンドウにしては珍しい 閉じる際のアニメーションも実現できました。 通常パターン See the Pen by Kuzlog on. 上から See the Pen by Kuzlog on. 拡大 See the Pen by Kuzlog on. ふんわり See the Pen by Kuzlog on. 解説 先程紹介した「通常パターン」のソースがこちらです。 一通り目を通せば分かr…分からないですねこれ。 肝となるのは「:checked」 :checkedというのはCSS3の擬似クラスで、一般的にはチェックされている要素(radioとかcheckbox)のスタイルを変化させる際に使用されます。 なんでscale 0 で隠してんの? このコードでは、モーダルウィンドウ及び背面のオーバーレイ部分を transform: scale 0 ;で隠しています。 普通に考えて、要素を隠すときは display:none;を使いますよね。 ただ、今回はクリックでスタイルを変更するという仕組みのため、 displayを使って要素の表示・非表示を切り替えると、どうしても ウィンドウを閉じるときのアニメーションが作れなかったんです…そりゃ一瞬で非表示になりますからね。 実際、他の人が作ったPureCSSモーダルウィンドウを見てみると、 閉じるときのアニメーションまで実装されているものはほとんどありません。 そんなのやだ!絶対やだ!!って事で、結局 scale 0 で強引に隠すことにしました。 これならモーダルウィンドウを閉じた際の徐々に背景が明るくなっていくようなエフェクトが簡単に掛けられます。 こんな隠し方をしていいのか分からない上に、全部作った後で「あれ?これ animation使えば display:none;でもいけたんじゃね?」って事に気付いたのは秘密。 注意点 実用する人はいないと思いますが、無理やり作ったのでいくつか注意点があります。 モーダルウィンドウ内のコンテンツが多すぎるとスクロールが発生してしまい、最初に表示された領域以下の場所では画面外クリックが効かなくなります• 動作確認はChrome・Firefox・Edge・Android(Chrome)でしか行っていません• モバイルに対応させるならメディアクエリを使ってwidthを調整したほうがいいです• 実際jQueryとか使ったほうが楽に良いもの作れます 色々と試行錯誤したんですが、スクロール時の画面外クリック対応は最後の最後まで作れませんでした…なんとかならねえのかなこれ。 誰か助けてください。 最後に 使う使わないは別として、CSSだけでもここまで作れる!という楽しさが伝われば嬉しいです。

次の