Go to Qiita Advent Calendar Top
LoginSignup
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@Mount(Build Mount)

JavaScript 第8回 初歩のモードレスウィンドウ（必要最低限）

Last updated at Posted at 2023-12-27

はじめに

今回は、モーダルウィンドウの第一歩として、必要最低限のモードレスウィンドウを作成します。
今後、何回かにわけてモードレスウィンドウの表示をパワーアップして、インターネットによくあるようなモーダルウィンドウを作り出すことができればと思います。

今回実施する内容

必要最低限のモードレスウィンドウを作成します。
画面のボタンを押下するとモードレスウィンドウが画面上部に表示され、ウィンドウ上の「ｘ」を押下するとウィンドウをクローズします。
modalwindow1.gif
モードレスであることを確認するため、もうひとつウィンドウを作ってもみます。
modeless2.gif

ソースコード(Git Hub)

環境

OS: Windows 11 JP (64bit)
Microsoft Edge：バージョン 120.0.2210.91 (公式ビルド) (64 ビット)

参考

border-radius

用語

モーダルウィンドウとモードレスウィンドウとは

モーダルウィンドウの定義が何かはよくわからないのですが、一般的には、 「ウィンドウを開くと、ウィンドウを閉じるまで、モーダルウィンドウ内しか操作できず他のウィンドウは操作ができないウィンドウ」 といったものだと思います。
これに対して、モードレスウィンドウがあり、「モードレスウィンドウを開いても他のウィンドウの操作が可能なウィンドウ」 と思います。

必要最低限のモードレスウィンドウ

モードレスウィンドウのソース

modeless.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modeless</title>
    <link rel="stylesheet" href="modeless.css" type="text/css">
    <script src="modeless.js" defer></script>
</head>
<body>
    <div>- 画面表示 -</div>
    <div id="showTop">画面上部表示</div>
    <div id="topDiv">
        <div class="closeCircle" id="closeTop">×</div>
        画面の上に表示されます。
    </div>
</body>
</html>
modeless.css
.closeCircle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 18px;
  text-align: center;
  position: absolute;
  right: 3px;
  top: 2px;
}

#topDiv .closeCircle {
  background-color: orange;
}

#topDiv {
  visibility: hidden;
  background-color:yellow;
  position: absolute;
  top: 0px;
  left: 20%;
  right: 20%;
  bottom: 80%;
}
modeless.js
document.getElementById("showTop").addEventListener("click", () => {
    showWindow("topDiv");
});

document.getElementById("closeTop").addEventListener("click", () => {
    closeWindow("topDiv");
});

function showWindow(divId) {
    document.getElementById(divId).style.visibility = "visible";
}

function closeWindow(divId) {
    document.getElementById(divId).style.visibility = "hidden";
}

modeless.htmlの説明

    <div id="showTop">画面上部表示</div>
    <div id="topDiv">
        <div class="closeCircle" id="closeTop">×</div>
        画面の上に表示されます。
    </div>

HTMLは、「画面上部表示」のdivタグ作成と、その画面上部用のdivタグ作成を行います。
「画面上部表示」は、id="showTop"でdivタグを作成します。 これを押下すると、画面上部のモードレスウィンドウを開くようにしますが、それはJavaScriptで設定します。 id="topDiv"のdiv`タグは、画面上部に表示するモードレスウィンドウの本体です。
この中には、

  • モードレスウィンドウをクローズするｘボタン（クローズボタン）。
  • 「画面の上に表示されます。」の文字列。
    が含まれます。

クローズボタンは、<div class="closeCircle" id="closeTop">×</div>でdivタグで作成します。
class="closeCircle"は、クローズボタンを作成するためのクラスです。id="closeTop"`は、クローズボタンを押下時にモードレスウィンドウを非表示に切り替えるためのJavaScriptが必要ですので、関連付けるためのidとして設定します。
ボタンとなる文字は、「×」を記載しています。フォントは特に指定していませんが、ユーザー環境によっては「ｘ」に見えない可能性もありますが、簡単のためこのようにします。

modeless.cssの説明

CSSは、以下の３つのセレクターで構成します。

  • .closeCircle
  • #topDiv .closeCircle
  • #topDiv

.closeCircleは、クローズボタンを示す円を描くためのセレクターです。今回の画面上部に表示するモードレスウィンドウだけでなく、他の箇所でも使えるかなと思い、一般的なクローズボタンというつもりで、クラスで設定します。

.closeCircle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 18px;
  text-align: center;
  position: absolute;
  right: 3px;
  top: 2px;
}

幅(width)、高さ(height)は18pxとし、円の直径のサイズです。
border-radiusは、以下の記載があります。

border-radius は CSS のプロパティで、要素の境界の外側の角を丸めます。1 つの半径を設定すると円の角になり、2 つの半径を設定すると楕円の角になります。

border-radius: 50%を設定すると、円になります。
font-sizeは、この円よりも少し小さめにし、line-heightは、この円と同じ大きさにします。
これで縦方向はセンタリングされます。
横方向は、text-align: centerでセンタリングします。
position: absoluteとし、このクローズボタンを含む親要素からのオフセットとし、right: 3px、top: 2pxとします。これで枠内ですがこの親要素のtopDivの右上に円が配置されます。

#topDiv .closeCircle {
  background-color: orange;
}

#topDivの後に半角スペースを入れて、.closeCircleを記載することで、親要素のidがtopDivで、子要素のclassがcloseCircleのセレクターができます。
感覚的に半角スペースというのが違和感なのでではすが、「/」などで区切ってくれたほうがわかりやすいのですが、仕様なので仕方ないですね。「/」だと都合が悪かったんだろうと思います。
ということで、idがtopDivである子の要素のクラスがcloseCircleである要素の背景色をオレンジに設定します。
画面上部に表示するモードレスウィンドウのクローズボタンはオレンジ色にするために実施します。
その他のウィンドウでは、親要素を変えることで、色やその他のプロパティを設定すればよいと思い、このようにしました。

#topDiv {
  visibility: hidden;
  background-color:yellow;
  position: absolute;
  top: 0px;
  left: 20%;
  right: 20%;
  bottom: 80%;
}

topDivのDivタグ用のセレクターです。
visibility: hiddenで初期は非表示にします。背景色は何でもよいのですが、今回は、background-color:yellowとしました。
position: absolute、top: 0px、left: 20%、right: 20%、bottom: 80%で、topDivを画面上部に配置します。

modeless.jsの説明

idがshowTopとcloseTopのdivタグにaddEventListenerを追加し、divタグクリック時の動作を設定します。
showTopはshowWindow関数を実行し、closeTopはcloseWindow関数を実行します。
showWindow関数は、topDivのdivタグを表示し、closeWindow関数は、topDivのdivタグを非表示にします。いずれも引数にdivIdとしており、表示・非表示するdivを選択できるようにしました。

モードレスウィンドウ２つ

モードレスウィンドウということなので、他のウィンドウも操作できますが、その動作の確認をします。

モードレスウィンドウ２つのソース

modeless2.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modeless</title>
    <link rel="stylesheet" href="modeless2.css" type="text/css">
    <script src="modeless2.js" defer></script>
</head>
<body>
    <div>- 画面表示 -</div>
    <div id="showTop">画面上部表示</div>
    <div id="showRight">画面右部表示</div>
    <div id="topDiv">
        <div class="closeCircle" id="closeTop">×</div>
        画面の上に表示されます。
    </div>
    <div id="rightDiv">
        <div class="closeCircle" id="closeRight">×</div>
        画面の右に表示されます。
    </div>
</body>
</html>
modeless2.css
.closeCircle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 18px;
  text-align: center;
  position: absolute;
  right: 3px;
  top: 2px;
}

#topDiv .closeCircle {
  background-color: orange;
}

#topDiv {
  visibility: hidden;
  background-color:yellow;
  position: absolute;
  top: 0px;
  left: 20%;
  right: 20%;
  bottom: 80%;
}

#rightDiv .closeCircle {
  background-color: blue;
  top: -20px;
}

#rightDiv {
  visibility: hidden;
  background-color:blueviolet;
  position: absolute;
  top: 50px;
  left: 80%;
  right: 0%;
  bottom: 20%;
}
modeless2.js
document.getElementById("showTop").addEventListener("click", () => {
    showWindow("topDiv");
});

document.getElementById("closeTop").addEventListener("click", () => {
    closeWindow("topDiv");
});

document.getElementById("showRight").addEventListener("click", () => {
    showWindow("rightDiv");
});

document.getElementById("closeRight").addEventListener("click", () => {
    closeWindow("rightDiv");
});

function showWindow(divId) {
    document.getElementById(divId).style.visibility = "visible";
}

function closeWindow(divId) {
    document.getElementById(divId).style.visibility = "hidden";
}

modeless2.htmlの説明

    <div id="showRight">画面右部表示</div>
    ...
    <div id="rightDiv">
        <div class="closeCircle" id="closeRight">×</div>
        画面の右に表示されます。
    </div>

HTMLは、最初のソースに加えて、「画面右部表示」と、右側に表示するdivタグを作成します。

modeless2.cssの説明

CSSは、2つ目用に２つのセレクターで構成します。

  • .closeCircle
  • #rightDiv .closeCircle
  • #rightDiv

.closeCircleは、１つ目用のものと同じです。

#rightDiv .closeCircle {
  background-color: blue;
  top: -20px;
}

#topDiv .closeCircleは、右側用のクローズボタンの個別設定です。top: -20pxを設定し、rightDivのdivタグの上にクローズボタンが表示するように変更しました。

#rightDiv {
  visibility: hidden;
  background-color:blueviolet;
  position: absolute;
  top: 50px;
  left: 80%;
  right: 0%;
  bottom: 20%;
}

rightDivのdivタグ用のセレクターです。
right: 0%で右側に表示されるようにしたことくらいが1つ目のものとの違いです。

modeless2.jsの説明

１つ目用に加え、rightDiv表示用、および非表示用の関数を追加しました。

おわりに

今回はモードレスウィンドウを作成しました。
今後は、このウィンドウをもとにモーダルウィンドウへ更新していきたいと思います。

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?