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

Question

前提・実現したいこと

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

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

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

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

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

該当のソースコード

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

#loading {
  display: table;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity: 0.8;
}
 
#loading .loadingMsg {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding-top: 140px;
  background: url("[LoadingイメージのURL]") center center no-repeat;
}

<div class="wrapper-button">
  <a id="btn-a" class="button" download="" >ボタンA</a>

  <a id="btn-b" class="button" download="">ボタンB</a>
</div>

<a id="btn-loading">ダウンロード</a>

試したこと

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

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

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

Answer 1

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

Comments

[yambejp]

<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">