JavaScriptの.offsetHeightでページ最下部に到達した時にモーダルを表示

// 要素を取得
var pElement = document.getElementById( "element" ) ;

// offsetHeightを取得
var offsetHeight = pElement.offsetHeight ;

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="closeBtn">&times;</span>
    <p>ページの最下部に到達しました</p>
  </div>
</div>

// モーダルが表示されたかどうかを判断するフラグ
var modalDisplayed = false;

// ユーザーがスクロールする度にこの関数が呼び出されます
window.onscroll = function(ev) {
    // ユーザーがページの最下部に到達したかどうかを判断します
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        // ページの最下部にスクロール到達
        // モーダルが表示されていなければ、モーダルを表示します
        if (!modalDisplayed) {
            openModal();
            modalDisplayed = true;
        }
    } else {
        // ユーザーがページの最下部から上にスクロールした場合、
        // フラグをリセットして次回の最下部到達時にモーダルを再表示できるようにします
        modalDisplayed = false;
    }
};

// モーダルを表示する関数
function openModal() {
    // モーダルと閉じるボタンの要素を取得します
    var modal = document.getElementById("myModal");
    var span = document.getElementsByClassName("closeBtn")[0];

    // モーダルに"showmodal"クラスを追加して表示します
    modal.classList.add("showmodal");

    // ×ボタンがクリックされたら、モーダルから"showmodal"クラスを削除して非表示にします
    span.onclick = function() {
        modal.classList.remove("showmodal");
    }

    // モーダルの外側がクリックされたら、モーダルから"showmodal"クラスを削除して非表示にします
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.classList.remove("showmodal");
        }
    }
}

.modal {
    display: block; /* モーダルをブロック要素として表示します */
    position: fixed; /* モーダルを固定位置に配置します */
    z-index: 999; /* モーダルが他の要素より前面に表示されるようにします */
    left: 0; /* モーダルを左端から0pxの位置に配置します */
    top: 0; /* モーダルを上端から0pxの位置に配置します */
    width: 100%; /* モーダルの幅を画面の全幅にします */
    height: 100%; /* モーダルの高さを画面の全高にします */
    overflow: auto; /* モーダル内のコンテンツがはみ出した場合、スクロールバーを表示します */
    background-color: rgba(0,0,0,0.4); /* モーダルの背景色を半透明の黒にします */
    opacity: 0; /* モーダルを初めて透明にします */
    transition: 0.3s ease-in-out; /* モーダルの透明度が変化する速度を指定します */
    pointer-events: none; /* モーダルにマウスイベントを無効にします（初期状態ではクリックなどが効かないようにします） */
}
.modal.showmodal {
    opacity: 1; /* モーダルを表示状態（不透明）にします */
    pointer-events: auto; /* モーダルにマウスイベントを有効にします */
    cursor: pointer; /* モーダル上のマウスカーソルをポインタにします */
}

.modal-content {
    /* モーダル内のコンテンツのスタイルを指定します */
    /* 主に背景色、パディング、位置、サイズ、枠線、影などの視覚的なプロパティを指定します */
}

.modal-content p {
    margin: 0; /* モーダル内の<p>タグのマージンを無効にします */
}

.closeBtn {
    /* 閉じるボタンのスタイルを指定します */
    /* 主に色、位置、フォントサイズ、フォントの太さなどの視覚的なプロパティを指定します */
}

.closeBtn:hover,
.closeBtn:focus {
  color: #000; /* ボタンにホバーまたはフォーカスされたときの色を黒にします */
  text-decoration: none; /* テキストの下線を削除します */
  cursor: pointer; /* マウスカーソルをポインタにします */
}