JavaScriptでモーダル表示（テンプレート挿入）

完成動画

パパっとモーダルを表示させましょう！

やってることはそんなに難しくないです。

HTMLにJSを直接書き込んでます。

DOM操作で直接いじくりまわしましょう！

早速コードはコチラ

 <div>
    <textarea  id="modal_text_area" cols="30" rows="10" style="margin: 50px;" ></textarea>
  </div>
  
  <dev class="handle_insert_btn" style="display: block;margin: 15px;">
    <p class="c-es-insert-btn" onclick="showModalClick()" style="cursor: pointer;display: inline-block;padding: 6px 20px;text-align: center;">テンプレートから文章を追加する</p>
    <p class="c-es-cancel-btn" onclick="clearBtnClick()" style="cursor: pointer;display: inline-block;padding: 6px 20px;text-align: center;">クリア</p>
  </dev>
  
  <dev 
    style="
        display: none;
        width: 100%;
        height: 100%;
        z-index: 99;
        background-color: rgba(0,0,0,0.5);
        position:fixed;
        top:0;
        left:0;
    " 
    id="modal_bg" 
    onclick="cancelBtnClick()"
  ></dev>
  <dev 
    style="
        display: none;
        width: 70%;
        height: 70%;
        z-index: 100;
        background-color: white;
        position:fixed;
        top:20%;
        left:15%;
        margin: 0;
        padding: 0;
        border-radius: 10px;
    " 
    id="modal_main"
  >
    <dev>
        <p style="margin: 15px;text-align: left;float: left; color: #135064;"><span id="text_indx">1</span>/7 </p>
        <p style="margin: 15px;text-align: right;"><span style="cursor: pointer;font-weight: 700;font-size: 20px;" onclick="cancelBtnClick()">×</span></p>
    </dev>
    <p id="ex_title" style="text-align: center;margin:0px 10%;background-color: #E9F0F2;padding: 20px;color: #135064;">○○テンプレート</p>
    <textarea id="modal_value" class="l-student__textarea" style="height: 50%; width:80%;margin:0px 10%;background-color: #E9F0F2;border: 0;color: #135064;resize: none;"></textarea>
    <dev style="display: block;margin: 15px;text-align: center;">
        <span id="text_before" onclick="beforeClick()" style="text-align: center;display: inline-block;cursor: pointer;background-color: #135064;color: white;width: 35px;height: 35px;line-height: 35px;border-radius: 50%;font-weight: 900;font-size: 30px;">←</span>
        <p class="c-es-insert-btn" onclick="insertBtnClick()"style="text-align: center;display: inline-block;width: 100px;line-height: 35px;height: 35px;">挿入する</p>
        <span id="text_after" onclick="afterClick()" style="text-align: center;display: inline-block;cursor: pointer;background-color: #135064;color: white;width: 35px;height: 35px;line-height: 35px;border-radius: 50%;font-weight: 900;font-size: 30px;">→</span>
    </dev>
  </dev>
  
  <script>
    const ex_text = [
      "hoge1hoge1hoge1hoge1hoge1hoge1hoge1hoge1hoge1hoge1hoge1hoge1\r\nhoge1hoge1hoge1hoge1ho\r\nge1hoge1hoge1hoge1hoge1hoge1hoge1hoge1hoge1hoge1",
      "hoge2hoge2hoge2hoge2hoge2hoge2hoge2hoge2hoge2",
      "hoge3hoge3hoge3\r\nhoge3hoge3hoge3hoge3hoge3hoge3hoge3hoge3hoge3hoge3hoge3hoge3hoge\r\n3hoge3hoge3hoge3hoge3hoge3hoge3hoge3hoge3hoge3hoge3",
      "hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge",
      "hogehoge2hogehoge2hogehoge2",
      "tagetage1tagetage1tagetage1tagetage1tagetage1tagetage1tagetage1tagetage1",
      "tagetage3tagetage3tagetage3tagetage3tagetage3tagetage3tagetage3",
    ]
  
    const ex_title = [
      "hoge1",
      "hoge2",
      "hoge3",
      "hogehoge",
      "hogehoge2",
      "tagetage1",
      "tagetage3",
    ]
  
    function insertBtnClick(){
        document.getElementById("modal_text_area").value = document.getElementById("modal_value").value
        document.getElementById("modal_bg").style.display = "none"
        document.getElementById("modal_main").style.display = "none"
    }//選んだ文章を代入
  
    function clearBtnClick(){
        document.getElementById("modal_text_area").value = ""
    }//文章の内容をクリアにする
  
    function showModalClick(){
        document.getElementById("modal_bg").style.display = ""
        document.getElementById("modal_main").style.display = ""
        var index = document.getElementById("text_indx").innerHTML
        document.getElementById("modal_value").value = ex_text[Number(index)-1]
        document.getElementById("ex_title").innerHTML = ex_title[Number(index)-1]
    }//モーダルを出現させる
  
    function cancelBtnClick(){
        document.getElementById("modal_bg").style.display = "none"
        document.getElementById("modal_main").style.display = "none"
    }//モーダルを閉じる
    
    function beforeClick(){
        var index = document.getElementById("text_indx").innerHTML
        if (Number(index)<=1){
            index = 7
            document.getElementById("text_indx").innerHTML = Number(index)
            document.getElementById("modal_value").value = ex_text[Number(index)-1]
            document.getElementById("ex_title").innerHTML = ex_title[Number(index)-1]
        }else{
            document.getElementById("text_indx").innerHTML = Number(index) - 1
            document.getElementById("modal_value").value = ex_text[Number(index)-2]
            document.getElementById("ex_title").innerHTML = ex_title[Number(index)-2]
        }
    }//前の文章を選ぶ
  
    function afterClick(){
        var index = document.getElementById("text_indx").innerHTML
        if (Number(index)>=7){
            index = 1
            document.getElementById("text_indx").innerHTML = Number(index)
            document.getElementById("modal_value").value = ex_text[Number(index)-1]
            document.getElementById("ex_title").innerHTML = ex_title[Number(index)-1]
        }else{
            document.getElementById("text_indx").innerHTML = Number(index) + 1
            document.getElementById("modal_value").value = ex_text[Number(index)]
            document.getElementById("ex_title").innerHTML = ex_title[Number(index)-1]
        }
    }//次の文章を選ぶ
  </script>

かなり冗長ですが、お許しください！

ちょっと見た目を整えるために直接style指定しています。（本来はCSSに分けるべき）

テンプレートを表示させてますが、テンプレート以外にも応用できるのでいろいろ使ってみてください。

個人的にはBootstrapとかのフレームワークを使うと簡単に実装できると思っています！