<!-- フォーム -->
<form id="form">
  <input type="email" id="email" placeholder="メールアドレス">
  <button type="submit" class="btn">登録する</button>
</form>
  
<div id="modal-container">
  <!-- ここにコンテンツを挿入する-->
</div>

<!-- モーダルのコンテンツ-->
<template id="template-modal">
  <div class="modal-background">
    <div class="modal-content">
      <h2>メールを送信しました</h2>
      <p id="note"></p>
    </div>
  </div>
</template>














<!-- Code Kitchenのバナー -->
<a href="https://code-kitchen.dev/" style="display: table; position: fixed; bottom: 2px; right: 5px;" target="_blank"><img src="https://res.cloudinary.com/code-kitchen/image/upload/v1582096487/static/banner.svg" alt="Code Kitchen" width="110" height="30"></a>
form {
  margin: 1rem;
  display: flex;
}
input[type="email"] {
  font-size: 0.9rem;
  padding: 0.2em;
}
.btn {
  display: inline-block;
  padding: 0.4em 0.8em;
  border: none;
  background: #529fff;
  color: #FFF;
  font-size: 1rem;
  text-decoration: none;
}
// モーダルの背景
.modal-background {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
   display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.3);
}
// モーダルウィンドウ
.modal-content {
  position: fixed;
  width: 250px;
  padding: 1.5em;
  background: #FFF;
  border-radius: 10px;
  text-align: center;
  h2 {
    margin: 0;
    font-size: 1.2em;
  }
}
View Compiled 
const activateTemplate = () => {
  // 1. templateコンテンツを取得
  const templateModal = document.getElementById('template-modal');
  const content = templateModal.content;

  // 2. 複製
  const clone = document.importNode(content, true); // 第2引数はtrueにする（子ノードまで複製）
  
  // 3. 操作（メールアドレスをモーダルに表示）
  const email = document.getElementById('email').value;
  // 複製コンテンツの#noteのテキストを設定
  clone.getElementById('note').innerText = `${email}にメールを送信しました`;
  
  // 4. 挿入
  document.getElementById('modal-container').appendChild(clone);
}


// フォーム送信時に挿入を実行
document.querySelector('#form').addEventListener('submit', e => {
  e.preventDefault();
  activateTemplate();
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.