同じ機能のモーダルダイアログを開閉する

Question

私は、読み込んだときにデータをテーブルに取り込むサイトを持っています。各列ヘッダーはクリック可能で、その列のデータに基づいて表のソートが行われます。これはうまく動作しますが、速度が遅いので、エンドユーザーに並べ替えるのを待つようアドバイスするモーダルウィンドウポップアップが必要です。私は既にモーダルウィンドウのコードを持っているだけでなく、それを呼び出すとjavascriptの行を閉じますが、私はそれを表示することはできませんし、ソートが完了したら消えます。

モーダルコード：

<div id="SortingBox" class="modal3">   
    <!-- Modal content --> 
    <div class="modal-content3"> 
     <div class="modal-header2"> 
      <h2>Loading</h2> 
     </div> 
     <div class="modal-body2"> 
      <pre><strong style="color: black;">Please Wait...</strong></pre> 
     </div> 
    </div> 
</div> 

私はこのラインでモーダルを呼び出す：

document.getElementById('SortingBox').style.display='block'; 

そして、これでそれを閉じる：

document.getElementById('SortingBox').style.display='none'; 

今、私はすでにページにこの作業を持っていますそれを閉じるための行は別のjsファイルのソートスクリプトの最後にあります。だから私は列ヘッダーがクリックされたときに表示させ、並べ替えが完了したらもう一度閉じることができるようにしたい。

ありがとうございました。

Answer 1

なぜクラスリストのtogglemethodを使用しないのですか？

is-modal-hiddenを呼び出すクラスを作成します（display: none）。

// style.css 
.is-modal-hidden { 
    display: none; 
} 

クラスを切り替えることによって、モーダルを切り替えるjs関数を作成します。そのような

何か：

function toggleModal() { 
    document.getElementById('SortingBox').classList.toggle('is-modal-hidden'); 
}