HTMLページ内でモーダルの表示枠を表示するコードと実行結果を紹介します。
HTMLのページ内でモーダルのダイアログ的な表示枠を表示する場合には、以下の表示を組み合わせます。
それぞれの要素は以下の記事を参照してください。
以下のHTML、CSSファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="ModalFrame.css" />
<script type="text/javascript">
function ShowModal() {
//Scrokll lock
elems = document.getElementsByTagName("body");
for (var item of elems) {
item.classList.add("scroll-lock");
}
var target = document.getElementById("fadeLayer");
var maxheightA = Math.max(document.body.clientHeight, document.body.scrollHeight)
var maxheightB = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)
var MaxHeight = Math.max(maxheightA, maxheightB);
target.style.height = MaxHeight + "px";
var maxwidthA = Math.max(document.body.clientWidth, document.body.scrollWidth)
var maxwidthB = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth)
var MaxWidth = Math.max(maxwidthA, maxwidthB);
target.style.width = MaxWidth + "px";
target.style.visibility = "visible";
//
var target_d = document.getElementById("dialogFrame");
target_d.style.visibility = "visible";
}
function CloseModal() {
//Scrokll unlock
elems = document.getElementsByTagName("body");
for (var item of elems) {
item.classList.remove("scroll-lock");
}
var target = document.getElementById("fadeLayer");
target.style.visibility = "hidden";
var target_d = document.getElementById("dialogFrame");
target_d.style.visibility = "hidden";
}
</script>
</head >
<body>
<div id="page">
<div class="section">section1</div>
<div class="section">section2</div>
<div class="section">section3</div>
<div class="section">section4</div>
<div class="section">section5</div>
<div class="section">
section6
<a href="javaScript:void(0);" onclick="ShowModal();">モーダルダイアログを表示</a>
</div>
<div class="section">section7</div>
<div class="section">section8</div>
<div class="section">section9</div>
<div class="section">section10</div>
<div class="section">section11</div>
<div class="section">section12</div>
</div>
<div id="fadeLayer">
</div>
<div id="dialogFrame">
<a href="javaScript:void(0);" onclick="CloseModal();">閉じる</a>
</div>
</body>
</html >
.section {
height: 480px;
border: 1px solid #ff6a00;
}
#fadeLayer {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.5;
visibility: hidden;
z-index: 1;
}
#dialogFrame {
--dialog-width: 480px;
--dialog-height: 320px;
position: fixed;
top: 50%;
left: 50%;
margin-left: calc(var(--dialog-width) / 2 * -1); /* widthの半分にする */
margin-top: calc(var(--dialog-height) / 2 * -1); /* heightの半分にする */
padding-left: 8px;
padding-right: 8px;
padding-top: 8px;
width: var(--dialog-width);
height: var(--dialog-height);
background-color: #FFFFFF;
visibility: hidden;
z-index: 2;
}
body.scroll-lock {
overflow: hidden;
}
ページのスクロールをできなくする。半透明の枠を全画面に表示する。画面の中央に枠を表示する。を組み合わせて画面の中央に枠を表示します。
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
ページを下にスクロールします。[モーダルダイアログを表示]のリンクをクリックします。
リンクをクリックすると、背景が暗くなり、画面の中央に枠が表示されます。
中央の枠の[閉じる]リンクをクリックします。
枠が非表示になります。
ドロップシャドウを表示する場合は、CSSの#dialogFramを以下に変更します。filter: drop-shadow を追加します。
#dialogFrame {
--dialog-width: 480px;
--dialog-height: 320px;
position: fixed;
top: 50%;
left: 50%;
margin-left: calc(var(--dialog-width) / 2 * -1); /* -240px; widthの半分にする*/
margin-top: calc(var(--dialog-height) / 2 * -1); /* -160px; heightの半分にする*/
padding-left: 8px;
padding-right: 8px;
padding-top: 8px;
width: var(--dialog-width);
height: var(--dialog-height);
background-color: #FFFFFF;
display:none;
z-index: 2;
filter: drop-shadow(8px 8px 16px rgba(0, 0, 0, 0.5));
}
上記のCSSで実行すると下図の表示結果になります。ドロップシャドウが表示されます。
