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

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

新規登録して質問してみよう
ただいま回答率
85.50%
ダウンロード

リモートシステムからローカルシステムへとデータを受信する事、もしくはそのようなデータ転送を行う事をダウンロードと呼びます。

モーダルダイアログ

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

JavaScript

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

HTML

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

CSS

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

Q&A

解決済

1回答

1640閲覧

モーダル表示中にボタンが機能しないようにしたい

123_

総合スコア1

ダウンロード

リモートシステムからローカルシステムへとデータを受信する事、もしくはそのようなデータ転送を行う事をダウンロードと呼びます。

モーダルダイアログ

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

JavaScript

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

HTML

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

CSS

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

0グッド

1クリップ

投稿2020/10/22 02:52

前提・実現したいこと

ローディング時にモーダルを表示させています。
そのときに画面を覆って操作できないようにしたいのですが、ボタンを押すと
ローディング後に機能します。

ローディング中に押したボタンは機能しないようにしたいです。

詰まってしまったので、どなたかわかる方いましたら教えて頂けると嬉しいです。

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

ボタンを押すとローディング後に機能します。

該当のソースコード

JavaScript

1function dispLoading(msg){ 2 // 引数なし(メッセージなし)を許容 3 if( msg == undefined ){ 4 msg = ""; 5 } 6 // 画面表示メッセージ 7 var dispMsg = "<div class='loadingMsg'>" + msg + "</div>"; 8 // ローディング画像が表示されていない場合のみ出力 9 if($("#loading").length == 0){ 10 $("body").append("<div id='loading'>" + dispMsg + "</div>"); 11 } 12}

css

1#loading { 2 display: table; 3 width: 100%; 4 height: 100%; 5 position: fixed; 6 top: 0; 7 left: 0; 8 background-color: #fff; 9 opacity: 0.8; 10} 11 12#loading .loadingMsg { 13 display: table-cell; 14 text-align: center; 15 vertical-align: middle; 16 padding-top: 140px; 17 background: url("[LoadingイメージのURL]") center center no-repeat; 18}

HTML

1<div class="wrapper-button"> 2 <a id="btn-a" class="button" download="" >ボタンA</a> 3 4 <a id="btn-b" class="button" download="">ボタンB</a> 5</div> 6 7<a id="btn-loading">ダウンロード</a>

試したこと

ダウンロードボタンを押すと$('.button').css('pointer-events', 'none');にして
ローディングが終わったらautoで戻していますが、その終わった途端にボタンが機能します。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

ベストアンサー

適当ですがこんな感じでしょうか?

投稿2020/10/22 04:14

yambejp

総合スコア114572

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

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

yambejp

2020/10/22 04:14

<script> $(function(){ $('body') .append($('<div id="dummy">').css({"width":"100%","height":window.innerHeight,"background-Color":"black","opacity":0.5,"position":"absolute","top":0,"left":0,"z-index":1})) .append($('<div id="loading">loading</div>').css({"background-Color":"white","position":"absolute","z-index":2})); setTimeout(()=>{ $('#dummy,#loading').remove(); },2000); }); </script> <input type="button" onclick="alert('alert')" value="alert">
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問