プログラミング今回はモーダルウィンドウをプラグイン無しで実装する方法を解説します。苦手で作成方法が不安プラグインを使わず簡単に実装したいこういった疑問に答えます。初心者でも問題ない3つの理由プラグインなしの作り方を詳しく解説この記事を書いている僕は、フロントエンドエンジニア歴が15年ほど。web業界からゲーム業界まで数多くのwebサイトやアプリケーションを制作しています。いった僕が、分かりやすく解説していきます。結論として問題ありません。理由は以下の3つです。プラグインが不要モーダルウィンドウを実装するjQueryプラグインはたくさんあります。プラグインに頼りがちですが既存のプラグインを利用すると「やりたい表現があるけど、どこをどうカスタマイズすればいいかわからない...」という状況に陥ってしまうこともあります。プラグインを使わなくても意外と簡単にモーダルウィンドウを実装することができます。自分で実装できれば、仕組みを理解しているのでカスタマイズやメンテもしやすいのが最大のメリットです。デモページを用意デモページを用意してますので実際に動きが確認できます。DEMOまた、GitHubにも実際のソースコードをアップしているのでクローンできます。jQuery]を確認できてコピペできます。サンプルコードはSCSSですがCSSを見たい場合は、GitHubにコンパイルされてないCSSファイルがありますのでご覧ください。デモページとソースコードを確認しながらご覧ください。プラグインなしの作り方を詳しく解説まず、jQueryを書いていく前に、以下の3つの準備が必要です。1jQueryの読み込みjQueryを使用するには、jQueryライブラリを読み込む必要があります。ライブラリはインターネット経由で読み込むのが一般的です。headタグの中で上記のようにURLを読み込むことで、jQueryが使用できるようになります。...</head>2jQueryのコードを記述するファイルの読み込みjQueryは、.js形式のファイルにコードを書きます。HTMLファイルで、scriptタグに書くことで、jQueryのコードを記述するファイルが読み込まれます。scriptタグはCSSファイルの読み込みのようにheadタグの中にも書けますが、bodyの閉じタグ直前に書くことで、WEBページの表示速度をより早めることが出来ます。src="modal.js"></script></body>3jQueryの型jQueryはHTMLの中身を操作するため、HTMLの読み込みが完了してからjQueryによる操作を開始するようにします。そのためにはreadyイベントを使用し、$(document).ready()の中身にjQueryの処理を書いていきます。});と書くことも出来ます。...});ではベースのコードを見ていきます。HTMLまずはHTMLを記述していきます。</div></section>SCSS続いてSCSSファイルを記述して行きます。pointer;}jQuery続いてJSファイルを記述して行きます。骨組みは以下の3つです。モーダルウィンドウを開くためのリンクモーダルウィンドウモーダルを隠すモーダルウィンドウを開くためのリンクid指定の場所をクリックするとモーダルが表示/非表示になるようにしています。idは同一ページに一箇所しか存在しないので、jQueryの処理が高速化されます。jQueryオブジェクトのセレクタにはできるだけidを用いるようにしましょう。class="c-modal__btn">新規登録はこちら</div>ログインボタンと新規登録ボタンを使って、ログインフォーム・新規登録フォームをモーダルにします。none;}モーダルをCSSで非表示にしておきます。{});ログインボタンと新規登録ボタンにclickイベントを設定します。モーダルウィンドウログインフォームと新規登録用のフィームにモーダルを用います。...</div>モーダルウィンドウ全体でフォームを囲むようにします。block;)してモーダルを表示させます。モーダルを隠す閉じるボタンをクリックした時に、モーダルが閉じるようにします。モーダルウィンドウをクリックしたときも、モーダルが閉じるようにしましょう。...</div>ログインと新規登録の2つのモーダルがありますが、これらを閉じるボタンは共通のものを使います。2箇所に同じclickイベントを設定するので、idではなくclassを用いましょう。$('#ji-signupModal').fadeOut();});閉じるボタンとモーダルウィンドウにclickイベントを設定し、fadeOutメソッドでモーダルを隠すようにします。クリックした時にログインフォームと新規登録フォームのモーダルをともに隠します。今回は以上になります。モーダルウィンドウの実装はついついプラグインに頼りがちですが、そういったものに頼らずに実装すれば仕組みを理解しているのでカスタマイズやメンテもしやすくなります。作成方法が不安な方は是非参考にしていただけると嬉しいです。