display: none

<button id="openModalBtn">モーダルを開く</button>

<div id="myModal" class="modal">
  <p>モーダルウィンドウ</p>
  <p>モーダルの内容です</p>
</div>

/* 問題1. モーダルがデフォルトで非表示になるようにCSSを書いてください */
.modal {
  display: none;
}


<button id="openModalBtn">モーダルを開く</button>

<div id="myModal">
  <p>モーダルウィンドウ</p>
  <p>モーダルの内容です</p>
</div>

/* 問題1. モーダルがデフォルトで非表示になるようにCSSを書いてください */



    const questions = [
        {
            title: 'モーダルがデフォルトで非表示になるようにCSSを書いてください',
            tests: [
                {
                    title: '`index.html`でモーダルの`div`に`*modal*`クラスを指定しよう',
                    hint: '`div`タグ内で`*class="クラス名"*`で指定してください',
                    test: () => isAttrValueEqual('div', 'class', 'modal')
                },
                {
                    title: '`style.css`で`*.modal*`クラスを作成して、モーダルが非表示になるようにCSSを書いてみよう',
                    hint: '`*display*`プロパティを指定してください',
                    test: () => isStyleEqual('.modal', 'display', 'none')
                }
            ]
        }
    ];


モーダルの非表示設定

<button>

ボタンの設置

<div>

モーダルウィンドウの基本構造を作成

document.getElementById()

clickイベント

element.style

~~~javascript
document.getElementById($(1)).style.$(2) = $(3);
~~~

display: block

モーダルを開く動作を作成

閉じるボタンの追加

document.addEventListener()

モーダルを閉じる動作の設定

position: fixed

left

transform

background-color

width

border

モーダルのデザインを追加

height

モーダルの背景のスタイル指定

event.target

window.onclick

モーダル以外をクリックで閉じる動作を追加

モーダルウィンドウの作成から表示管理まで、ユーザー体験を高めるウェブサイト機能を、JavaScriptによる操作で学びます。

webサイトに動きをつけたり、表示内容を切り替えたり、formの入力を制御するなど様々な処理について学んでいきます

JavaScript DOM操作コース

【実践🔥】DOM操作でUIアニメーションを実装しよう

「モーダルウィンドウを作ろう」レッスンの総復習クイズです。