javascriptダイアログ表示中に背景を非活性にしたいが背景のボタンを押下出来るためNG

前提・実現したいこと

■実現したいこと
chromeでhtmlを起動時、YESボタンまたは、Noボタンを押下して、YESNOダイアログを表示中に、ダイアログの背景（灰色）で表示しているYES/NOボタンを押下出来ないようにしたいです。

発生している問題・エラーメッセージ

YESボタンまたは、NOボタンを押下すると、YESNOダイアログを表示して、ダイアログ以外の画面表示(YESボタン、NOボタン)は灰色で表示しますが、YESボタンと、NOボタンを何度も押下できます。
手順1．YESボタン押下時、下記画像を表示する。

手順2．ダイアログ表示中にNOボタンを押下出来る
※NOボタンを押下出来ることがNGです。押下出来ないように修正したいです。

該当のソースコード

html
1<!DOCTYPE html>
2	<link rel="stylesheet" type="text/css" href="./css/szkcss.css"/>
3  	<script src="./js/szktable.js"></script>
4	<meta charset="utf-8"/>
5	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
6	<title>水族館</title>
7<body>
8　　<!-- ダイアログ  -->
9	<div class="msgDialog2btn">
10		<input type="checkbox" id="msgDialog2_on"></input>
11		<div class="dialog2btn">
12			<div class="dialog2btn-heading">
13				<div class="dialog2btn-heading-title"></div>
14				<label for="msgDialog2_on" class="icon-close" onclick="szkCntrlUnSet()">×</label>
15			</div>
16			<div class="dialog2btn-body">
17				<div class="dialog2btn-contents-area">
18					<div class="dialog2btn-message" id="dialog2btn_message"></div>
19				</div>
20				<div class="dialog2-btn-area" align="center">
21					<label for="msgDialog2_on" type="submit" class="dialog2setbtn" id="dialog2yes" onclick="szkCntrlSetYes()">OK</label>
22					<label for="msgDialog2_on" type="submit" class="dialog2setbtn" id="dialog2no" onclick="szkCntrlUnSet()">NG</label>
23				</div>
24			</div>
25		</div>
26	</div>
27
28	<div class="row">
29		<div class="form_szkCntrlArea">
30			<!-- YESNOボタン -->
31			<div class="szkChangeArea">
32  				<input type="radio" name="sample1radio" id="szkchOff" onclick="szkSetYesClick()">
33    			<label for="szkchOff" id="label_szkchOff">YES</label>
34  				<input type="radio" name="sample1radio" id="szkchOn" onclick="szkSetNoClick()">
35    			<label for="szkchOn" id="label_szkchOn">NO</label>
36			</div>
37		</div>
38	</div>
39</body>

CSS
1* {
2	margin: 0;
3	padding: 0;
4	box-sizing: border-box;
5	border: none;
6}
7
8*:focus {
9	outline: none;
10}
11
12body {
13	background-color: #E9E9E9;
14}
15 /* YESNOボタン表示エリア */
16.szkChangeArea {
17  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.251));
18  position       : absolute;
19  width          : 15%;
20  height         : 40px;
21  top            : 351px;
22  margin-left    : 64vw;
23}
24 
25 /* ラジオボタン */
26.szkChangeArea input[type="radio"] {
27  display        : none;
28}
29 
30 /* ラジオボタンのラベル */
31.szkChangeArea label {
32  display        : block;
33  position       : absolute;
34  top            : 0;
35  bottom         : 0;
36  left           : 0;
37  right          : 0;
38  text-align     : center;
39  line-height    : 40px;
40  font-family    : Meiryo;
41  font-style     : normal;
42  font-weight    : normal;
43  font-size      : 16px;
44  border         : 2px solid #ccc;
45}
46 
47 /* YESラジオボタンのラベル（標準） */
48.szkChangeArea #szkchOff + label {
49  right          : 50%;
50  background: #FFFFFF 0% 0% no-repeat padding-box;
51  box-shadow: 0px 3px 6px #00000040;
52  color          : #666;
53  border-right   : none;
54  line-height    : 30px;
55}
56 
57 /* YESラジオボタンのラベル(NO時) */
58.szkChangeArea #szkchOff:checked +label {
59  background     : linear-gradient(175deg, #CA000B, #CA000B, #CA000B);
60  color          : #fff;
61  display        : table-cell;
62}
63 
64 /* NOのラジオボタンのラベル（標準）*/
65.szkChangeArea #szkchOn + label {
66  left           : 50%;
67  color          : #666;
68  border-left    : none;
69  line-height    : 30px;
70}
71 
72 /* NOのラジオボタンのラベル（YES時） */
73.szkChangeArea #szkchOn:checked +label {
74  background     : linear-gradient(180deg, #CA000B, #CA000B, #CA000B);
75  color          : #fff;
76}
77
78/* ダイアログの設定 */
79.dialog2btn{
80  background-color: #ffffff;
81  box-shadow: 0 0 0 9999px #00000066;
82  display: none;
83  position: fixed;
84  top: 0;
85  left: 0;
86  right: 0;
87  bottom: 0;
88  margin: auto;
89  width: 40vw;
90  height: 350px;
91  z-index:5;
92}
93
94#msgDialog2_on{
95  display: none;
96}
97
98#msgDialog2_on:checked + .dialog2btn{
99  display: block;
100}
101
102.dialog2btn-heading{
103  background-color: #CA000B;
104  height: 40px;
105}
106
107.dialog2btn-heading-title{
108  padding-top: 9px;
109  padding-left: 10px;
110  text-align: left;
111  font: normal normal normal 15px/23px Meiryo;
112  letter-spacing: 0px;
113  color: #FFFFFF;
114  opacity: 1;
115}
116
117
118.dialog2btn-contents-area{
119  height : 194px;
120  width  : 538px;
121}
122
123.dialog2btn-message{
124  padding-top: 43px;
125  padding-left: 2.1vw;
126  padding-right: 2.1vw;
127  text-align: center;
128  font: normal normal normal 20px/30px Meiryo;
129  letter-spacing: 0px;
130  color: #000000;
131  opacity: 1;
132}
133
134.dialog2btn-btn-area{
135  margin-left: 5.4vw;
136  margin-right: 5.4vw;
137  align-items: center;  
138}
139
140.dialog2setbtn {
141  width: 170px;
142  height: 60px; 
143  padding-top: 15px;
144  text-align: center;
145  background: #FFFFFF 0% 0% no-repeat padding-box;
146  box-shadow: 0px 3px 6px #00000040;
147  font: normal normal normal 20px/30px Meiryo;
148  padding: 16px;
149  color: #707070;
150  opacity: 1;
151  display:inline-block;
152}
153
154.dialog2-btn-area > .dialog2setbtn {
155  margin-right: 2em;
156}

javascript
1const NOmsg = "NOにします。いいですか。";
2const YESmsg = "YESにします。いいですか。";
3
4function szkSetYesClick() {
5	document.getElementById("msgDialog2_on").value = true;
6	document.getElementById("label_szkchOff").style.backgroundColor = "#CA000B";
7	document.getElementById("label_szkchOff").style.color = "#FFFFFF";
8	document.getElementById("label_szkchOn").style.color = "#666666";
9	document.getElementById("label_szkchOn").style.backgroundColor = "#FFFFFF";
10
11	szk2typPopUp(YESmsg);
12}
13
14function szkSetNoClick() {
15	document.getElementById("msgDialog2_on").value = true;
16	document.getElementById("label_szkchOn").style.backgroundColor = "#CA000B";
17	document.getElementById("label_szkchOn").style.color = "#FFFFFF";
18	document.getElementById("label_szkchOff").style.color = "#666666";
19	document.getElementById("label_szkchOff").style.backgroundColor = "#FFFFFF";
20	szk2typPopUp(NOmsg);
21}
22
23function szk2typPopUp(msg) {
24	dialog2btn_message.textContent = msg;
25	document.getElementById("msgDialog2_on").checked = true;
26}

試したこと

CSSでダイアログのz-index=5、画面表示のz-index=1を設定して、画面表示が非活性になるかを試しましたが、何も変わりませんでした。
※背景色（灰色）のボタンを押下できてしまいます。

お願い

掲載したソースで問題は再現します。解決方法をご教示よろしくお願い致します。

行動規範の内容に同意します

回答3件

自己解決

下記で解決しました。

javascript
1function szk2typPopUp(msg) {
2dialog2btn_message.textContent = msg;
3document.getElementById("msgDialog2_on").checked = true;
4document.getElementById("szkchOff").setAttribute("disabled", true);
5document.getElementById("szkchOn").setAttribute("disabled", true);
6}

ダイアログで”NG”押下してダイアログを閉じた後、下記コードでボタン押下が可能となりました。

javascript
1document.getElementById("szkchOff").removeAttribute("disabled");
2document.getElementById("szkchOn").removeAttribute("disabled");

投稿2021/10/04 08:45

garou

総合スコア9

オーバーレイで一枚divを引いてやればよいでしょう。
面倒であればjQueryUIのdialogでモーダル処理は可能です

投稿2021/10/04 05:27

yambejp

総合スコア116724

garou

2021/10/04 08:46

yambejp様ご回答ありがとうございました。実装方法が分かりませんでした。

行動規範の内容に同意します

これが唯一のやり方ではないんで、一例としてみといてや。

まず、js/szktable.js に以下のように関数switchRadios(onOrOff) を追加します。

diff
1   dialog2btn_message.textContent = msg;
2   document.getElementById("msgDialog2_on").checked = true;
3 }
4+
5+function switchRadios(onOrOff) {
6+  document.querySelectorAll('input[name="sample1radio"]').forEach(elm => {
7+    elm.disabled = !onOrOff;
8+  });
9+}

この関数switchRadios(onOrOff)の引数 onOrOff はONまたはOFFの意味で、boolean(trueかfalse)です。二つのラジオボタン（[YES]と[NO]）の状態を以下のように変えます。

onOrOff: trueを与えるとクリックを受けつける状態にする。
onOrOff: falseを与えるとクリックを受けつけない状態にする。

次に、この追加した関数を使って、まず、ダイアログが表示されたとき、[YES]と[NO]のボタンを非活性にしたいので、szk2typPopUp(msg)関数の最後に、switchRadios(false)を追加します。

diff
1 function szk2typPopUp(msg) {
2   dialog2btn_message.textContent = msg;
3   document.getElementById("msgDialog2_on").checked = true;
4+  switchRadios(false); 
5 }

ここまでで、ダイアログを開いたとき、[YES]または[NO]をクリックしても、ダイアログ上のメッセージは変わらなくなるはずや。

そして最後に、ダイアログ上の[OK]または[NG]をクリックしてダイアログが閉じたあと、再び[YES]または[NO]のボタンはクリックを受けつけるようにせなあかん。つまり、 switchRadios(true); を実行せなあきまへん。

そのためには、質問にはコードが無いようやけど、szkCntrlSetYes()関数およびszkCntrlUnSet()関数の中に

diff
1+ switchRadios(true);

を追加するか、もしくは、暫定で動作確認するには、index.htmlを、以下のように修正でもよいです。

diff
1   <div class="dialog2btn">
2     <div class="dialog2btn-heading">
3       <div class="dialog2btn-heading-title"></div>
4-      <label for="msgDialog2_on" class="icon-close" onclick="szkCntrlUnSet()">×</label>
5+      <label for="msgDialog2_on" class="icon-close" onclick="szkCntrlUnSet(); switchRadios(true);">×</label>
6     </div>
7     <div class="dialog2btn-body">
8       <div class="dialog2btn-contents-area">
9         <div class="dialog2btn-message" id="dialog2btn_message"></div>
10       </div>
11       <div class="dialog2-btn-area" align="center">
12-        <label for="msgDialog2_on" type="submit" class="dialog2setbtn" id="dialog2yes" onclick="szkCntrlSetYes()">OK</label>
13-        <label for="msgDialog2_on" type="submit" class="dialog2setbtn" id="dialog2no" onclick="szkCntrlUnSet()">NG</label>
14+        <label for="msgDialog2_on" type="submit" class="dialog2setbtn" id="dialog2yes" onclick="szkCntrlSetYes(); switchRadios(true);">OK</label>
15+        <label for="msgDialog2_on" type="submit" class="dialog2setbtn" id="dialog2no" onclick="szkCntrlUnSet(); switchRadios(true);">NG</label>
16       </div>
17     </div>
18   </div>

つまり、[OK]ボタン、[NG]ボタン、およびバツ印をクリックしたときの onclick属性に、; switchRadios(true); を追加します。

これでどうやろか？うまくいくとええがの〜

投稿2021/10/03 12:36

退会済みユーザー

総合スコア0

garou

2021/10/04 02:02

suwmn50799様関西弁でのご回答ありがとうございました。頂きましたコメント通りに他のやり方もありました。下記でも非活性の対応は出来そうです。質問には載せていませんが、他のボタンをダイアログを表示中にボタン押下を無効にすることは出来ました。 function szk2typPopUp(msg) { dialog2btn_message.textContent = msg; document.getElementById("msgDialog2_on").checked = true; document.getElementById("szkchOff").setAttribute("disabled", true); document.getElementById("szkchOn").setAttribute("disabled", true); } ダイアログで”NG”押下してダイアログを閉じた後、下記コードでボタン押下が可能となりました。 document.getElementById("szkchOff").removeAttribute("disabled"); document.getElementById("szkchOn").removeAttribute("disabled"); 可能であれば、親タグでダイアログ以外の部品をまとめてボタン無効 or 非活性にしたいです。 ※ユーザー操作が可能な部品はダイアログのみにしたいです。 (例) htmlの<div class="row">で、画面全ての部品を一括してボタン無効 or 非活性に出来れば良いです。 ※ダイアログは操作が可能。もし、出来ない場合は、画面に存在する部品を1個ずつ、ボタン無効の処理を入れていきたいと思います。

行動規範の内容に同意します

あなたの回答