jQueryを使用してページ読み込み中にブロックする方法

方法1: BlockUIプラグインを使用する方法

1. BlockUIプラグインをダウンロードして、jQueryのスクリプトと共にページに読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="blockui.js"></script>

2. ボタンなどのイベントが発生したときに、ページをブロックするコードを追加します。

$('#myButton').click(function() {
  $.blockUI({ message: '<h1>Loading...</h1>' }); // ブロックメッセージを表示
  // ここに実行したい処理を追加します
  // 処理が完了したら、ブロックを解除します
  $.unblockUI();
});

方法2: CSSとjQueryを組み合わせてブロックする方法

1. CSSを使用して、オーバーレイとローディングメッセージを作成します。

<style>
  #overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none;
  }
  #loading-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 24px;
  }
</style>

2. jQueryを使用して、ページをブロックおよび解除するコードを追加します。

$('#myButton').click(function() {
  $('#overlay').show(); // オーバーレイを表示
  $('#loading-message').text('Loading...'); // メッセージを表示
  // ここに実行したい処理を追加します
  // 処理が完了したら、ブロックを解除します
  $('#overlay').hide();
});