Result jQuery//クリックイベント $("#showoverlay").click(function() { //オーバーレイ用のボックスを作成 $("body").append("<div id='overlay'></div>"); //フェードエフェクト $("#overlay").fadeTo(500, 0.7); $("#modalbox").fadeIn(500); }); //閉じる際のクリックイベント $("#close").click(function() { $("#modalbox, #overlay").fadeOut(500, function() { $("#overlay").remove(); }); }); $(window).resize(function() { //ボックスサイズ $("#modalbox").css({ top: ($(
![シンプルなモーダルウィンドウ](https://cdn-ak-scissors.b.st-hatena.com/image/square/b6b1c87ada2ad66409793e3653c810e333009609/height=288;version=1;width=512/http%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2019%2F12%2Fsite-icon.png)