モーダルウィンドウ

モーダルウィンドウというのは、親ウィンドウから開かれた子ウィンドウで、その子ウィンドウでやるべき操作をやるまでは親ウィンドウの操作ができなくなるタイプの子ウィンドウのことです。

下の画像を見るとわかりやすいかもしれません。

※これから先モーダルウィンドウのことをモーダルと略します。

作り方は、HTMLでモーダルを表示させるためのボタンとモーダル部分を作ったら、CSSにdisplay: none;を追加しモーダルを表示させないようにします。

その後に、HTMLで作ったボタンとモーダルのclassの中にidを追加します。

最後に、JavaScriptを読み込ませ、ボタンにclickイベントを設定し、clickイベントでモーダルを表示させます。

この時に、fadeInメソッド・fadeOutメソッドを使いましょう。
Inがふわっと表示させてくれて、Outがスーッと消えてくれるようになります。

以上です。案外簡単にできるかもしれません。

ちなみにProgateのjQuery中級編にもやり方が載っています。