プラグイン不要のjQueryとCSSを使った簡単なモーダルウィンドウの実装方法をご紹介します。 まずはサンプルをご覧ください。 モーダルのサンプル See the Pen simple modal window01 by RECOOORD (@recooord) on CodePen. See the Pen simple modal window01 by RECOOORD (@recooord) on CodePen. 上記2つのサンプルはHTMLの文章量が異なるだけで、CSSとjQueryは同じコードを使っています。 特徴としては、文章量が少ない場合は、ブラウザ中央に表示され、文章量が多い場合はモーダルをスクロールして閲覧することができます。 HTML <!-- モーダルを開くボタン --> <div class="modal-open">モーダルを開く</div> <!-- モーダ
![【jQuery】シンプルなモーダルウィンドウの実装方法 | Recooord | Web制作で扱うコーディングスニペットを紹介](https://cdn-ak-scissors.b.st-hatena.com/image/square/0a7ecae81fed21ed0680725985dcaf2ef4c941c2/height=288;version=1;width=512/https%3A%2F%2Frecooord.org%2Fwp-content%2Fuploads%2Fmodal-window-simple_thumb.jpg)