質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
モーダルダイアログ

モーダルダイアログとは、ユーザーに重要な情報を表示するときに用いられる視覚的なダイアログのことを指します。これらのダイアログは他のすべてのコンテンツの上に表示され、ユーザーの入力を受けるまでアプリケーションフローは停止されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

2965閲覧

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

garou

総合スコア9

モーダルダイアログ

モーダルダイアログとは、ユーザーに重要な情報を表示するときに用いられる視覚的なダイアログのことを指します。これらのダイアログは他のすべてのコンテンツの上に表示され、ユーザーの入力を受けるまでアプリケーションフローは停止されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2021/10/03 07:34

前提・実現したいこと

■実現したいこと
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を設定して、画面表示が非活性になるかを試しましたが、何も変わりませんでした。
※背景色(灰色)のボタンを押下できてしまいます。

お願い

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

自己解決

下記で解決しました。

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

投稿2021/10/04 05:27

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

garou

2021/10/04 08:46

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

0

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

まず、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)の引数 onOrOffONまたはOFFの意味で、boolean(truefalse)です。二つのラジオボタン([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個ずつ、ボタン無効の処理を入れていきたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問