モーダルウィンドウを作る
山崎講師【modal】とは「モードに入っている」という程度の意味です。
後ろの画面は制御できないようにすることで前画面に集中してもらいます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- ビューポートの設定 -->
<!-- Bootstrap CSSの読み込み -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>spinner.html</title>
<style>
/* 画面中央に要素を配置するためのCSSクラス */
.center-screen {
display: flex; /* フレックスボックスを使用 */
justify-content: center; /* 水平方向の配置を中央に設定 */
align-items: center; /* 垂直方向の配置を中央に設定 */
height: 40vh; /* 高さをビューポートの高さの90%に設定 */
}
</style>
</head>
<body>
<!-- 画面中央に回転するスピナーを配置 -->
<div class="center-screen">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span> <!-- スクリーンリーダー専用の読み込み中メッセージ -->
</div>
</div>
<!-- 画面中央にサイズを変化させるスピナーを配置 -->
<div class="center-screen">
<div class="spinner-grow text-danger" role="status">
<span class="sr-only">Loading...</span> <!-- スクリーンリーダー専用の読み込み中メッセージ -->
</div>
</div>
<!-- ウィンドウを閉じるリンク -->
<p><a href="#" onClick="window.close(); return false;">このウィンドウを閉じる</a></p>
<!-- jQuery、Popper.js、BootstrapのJavaScriptファイルを読み込む -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>