昨今の便利なフレームワークやライブラリを使えばモーダルの一つや二つ簡単に実装できそうなものですが、素のJavaScriptで実装できるようになっていても損はないはずです！
超簡易的な実装例をご紹介しますので、早速やっていきましょう！
（チャンネル登録と高評価も忘れずにお願いしますww）
爆速実装
一応codepenにもコードを置いているので、手元で環境作るのが面倒な場合はささっと確認してみてください！
実際にできるやつ
デザインは非常にしょっぱいですが、基本的な考え方は分かりますww
HTML
<button onclick='openModal()'>モーダル表示</button>
<button onclick='closeModal()'>モーダル非表示</button>
<div id='wrapper' class='wrapper'>
<div class='title'><h2>タイトル</h2><div>
<div class='content'><p>コンテンツ</p></div>
</div>
JS
const target = document.getElementById('wrapper');
function openModal() {
console.log('wrapper');
target.style.display = 'block';
}
function closeModal() {
console.log('wrapper');
target.style.display = 'none';
}
※補足あり
CSS
.wrapper {
text-align: center;
background-color: #defffd;
padding: 250px;
display: none;
}
.title {
border: 1px solid;
padding: 100px
}
ポイント
モーダルというのは要するに、何かのイベントをきっかけに要素を出したり消したりできれば良いわけなので、考え方としては
・対象のエレメントを通常はdisplay: 'none';にしておく
・クリック、またはスクロールなどのイベントを検知した時に、対象の要素にdisplay: 'block';を付与する
を行えばOKです。
CSSはあまり得意ではないので、デザインは各自いい感じにしてくださいww
（今回書くの忘れていましたが、モーダルを表示している際はモーダルの背景はぼかすのが通常の実装かと思いますので、wrapperとtitleの間あたりに一個divを入れて、画面全体を覆うようなカラーを設定する必要がありますね。CSSはopacityとz-indexあたりを頑張って調整すれば良い感じになりそうです。もしかしたらHTMLのツリー構造も若干変える必要あるかも？）
プロダクトレベルで実装する場合
上記はかなり簡単な例ですが、実際にプロダクトレベルで実装する場合はバックエンドとのデータの通信が必要になる場合がほとんどだと思います。
対象のデータに応じてモーダル内部のDOMを動的に生成したり、イベントのバインドを行ったり、CSSをいい感じにしたりみたいな作業はほぼ必須かと思いますので、頑張って実装してください（白目）
また、今回は超簡易的な実装のためonclickを使いましたが、大体の場合はイベントリスナーを用いる事になりそうです。
（以下のような感じ）
element.addEventListner('click', ()=> {
// console.log('デバッグコードを仕込む')
// function('関数をコールする')
// someConst.innerHTML = '直接処理を行う'
// ...etc
})
扱うデータ量が増えてきたら適切なクラスに切り分けるなど、まだまだ工夫の余地がありますので、是非上記をとっかかりにいろいろ遊んでみてください！
それでは、不明な点などあれば何かコメントください！