【課題24】会員登録画面作成/もりけん塾

//モーダルのマークアップ箇所
//role属性を付与し、titleとdescribe箇所を指定
<div role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDesc" id="js-modal" class="modal hidden" >
    <button type="button" id="js-close" class="close_button">×</button>
    <div class="modal_container" id="js-modal_container">
　　　　　//titleとdescribe箇所をidにて指定する
        <h2 id="dialogTitle">利用規約</h2>
        <div id="dialogDesc" class="modal_content">
            <p>
                この利用規約（以下，「本規約」といいます。）は，＿＿＿＿＿（以下，「当社」といいます。）がこのウェブサイト上で提供するサービス（以下，「本サービス」といいます。）の利用条件を定めるものです。登録ユーザーの皆さま（以下，「ユーザー」といいます。）には，本規約に従って，本サービスをご利用いただきます。
            </p>
        </div>
        <div class="modal_content">
            <h3>第1条（適用）</h3>
            <ol>
                <li>本規約は，ユーザーと当社との間の本サービスの利用に関わる一切の関係に適用されるものとします。</li>
                <li>
                    当社は本サービスに関し，本規約のほか，ご利用にあたってのルール等，各種の定め（以下，「個別規定」といいます。）をすることがあります。これら個別規定はその名称のいかんに関わらず，本規約の一部を構成するものとします。
                </li>
                <li>本規約の規定が前条の個別規定の規定と矛盾する場合には，個別規定において特段の定めなき限り，個別規定の規定が優先されるものとします。</li>
            </ol>
        </div>
　　　　　//////////////////

        // 途中割愛

        ////////////////////
        <div class="modal_content">
            <h3>第15条（準拠法・裁判管轄）</h3>
            <ol>
                <li>本規約の解釈にあたっては，日本法を準拠法とします。</li>
                <li>本サービスに関して紛争が生じた場合には，当社の本店所在地を管轄する裁判所を専属的合意管轄とします。</li>
            </ol>
        </div>
        <div class="modal_content">
            <p>以上</p>
        </div>
    </div>
</div>

<div id="js-wrapper" class="wrapper">
    <h1>会員登録</h1>
    <form method="post">
        <div>
            <ul>
                <li>
                    <label for="name">ユーザー名</label>
                    <input type="text" id="name" name="user_name" />
                </li>
                <li>
                    <label for="mail">メールアドレス</label>
                    <input type="email" id="mail" name="user_email" />
                </li>
                <li>
                    <label for="password">パスワード</label>
                    <input type="password" id="password" name="user_password" />
                </li>
            </ul>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" id="js-checkbox" disabled />
                <a href="#" id="js-terms-textlink">利用規約</a>を読み同意しました
            </label>
        </div>
        <button type="button" id="js-submit-button" class="submit_button">送信</button>
    </form>
</div>

const options = {
  root: document.getElementById('js-modal'),
  threshold: 1
};

const checkWhenIntersect = ([entry]) => {
    if (entry.isIntersecting) {
      checkbox.checked = true;
      checkbox.disabled = false;
    }
}

//引数は１つなのでfor each使用する必要はないので却下
//const checkWhenIntersect = (entries) => {
//  entries.forEach(entry => {
//    if (entry.isIntersecting) {
//      checkbox.checked = true;
//      checkbox.disabled = false;
//    }
//  });
//}

const observer = new IntersectionObserver(checkWhenIntersect, options);
observer.observe(modalContainer.lastElementChild);
//ターゲット指定ではなく、modalの中の最後の要素(lastElementChild)にて指定に変更
//observer.observe(target);

submitButton.addEventListener('click',function(e){
  checkbox.checked ? window.location.href = './register-done.html' : e.preventDefault();
})

.modal {
    max-width: 500px;
    width: 100%;
    height: 350px;
    border-radius: 10px;
    position: relative;
    margin: 0 auto;
    z-index: 2;
    top: 13%;
    overflow: hidden;

}
.modal_container {
    width: 100%;
    height: 100%;
    background: #fff;
    overflow: scroll;
    padding: 30px;
}

/* .modal {
  max-width: 500px;
  width: 100%;
  position: relative;
  margin: 0 auto;
  z-index: 2;
  top: 13%;
}
.modal_container {
  background: #fff;
  overflow: scroll;
  height: 350px;
  border-radius: 10px;
  padding: 30px;
} */