通常、ポップアップウィンドウではなくモードが使用されます.
ポップアップウィンドウとモードウィンドウの最大の違いは、ポップアップウィンドウがブラウザに新しいウィンドウを表示し、既存のウィンドウにポップアップウィンドウと同じ形式で表示されます.
私は反応を学ぶと同時にmodelもよく作成して使用します.Vanilla JSの働き方を知っていれば、反応器を使ってモードを作成したり、モードに関連するライブラリを使用したりするときに、よりよく理解することができます.
コードからmodelを作成する方法を見てみましょう😀

追加モード

<div class="modal">
  <h1 class="modal__title">결제하시겠습니까?</h1>
  <div class="modal__actions">
    <a href="index.html" class="modal__action">예</a>
    <button class="modal__action modal__action--negative" type="button">
      아니오
    </button>
  </div>
</div>

次のようにHTMLコードを作成してみます.

ブラウザで上記の内容が表示されます.しかし、モードは常にユーザーに表示されるわけではありません.ユーザーがアクションを実行すると表示されます.
もしそうであれば、CSSを使用して上記のメッセージを変更します.

装飾モデル

.modal {
  position: fixed;
  display: block;
  z-index: 200;
  top: 20%;
  left: 30%;
  width: 40%;
  background: white;
  padding: 1rem;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.modal__title {
  text-align: center;
  margin: 0 0 1rem 0;
}

.modal__actions {
  text-align: center;
}

.modal__action {
  border: 1px solid #0e4f1f;
  background: #0e4f1f;
  text-decoration: none;
  color: white;
  font: inherit;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.modal__action:hover,
.modal__action:active {
  background: #2ddf5c;
  border-color: #2ddf5c;
}

.modal__action--negative {
  background: red;
  border-color: red;
}

.modal__action--negative:hover,
.modal__action--negative:active {
  background: #ff5454;
  border-color: #ff5454;
}

上の画面が見えますか?
ただし、常にモードウィンドウを表示することはできませんので、上記のコードのdisplayプロパティをnoneに変更します.

.modal {
  position: fixed;
  display: none;       // 변경!!!!
  z-index: 200;
  top: 20%;
  left: 30%;
  width: 40%;
  background: white;
  padding: 1rem;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

Javascriptコードに非表示のモデルを表示させます.
ボタンをクリックするとモードが現れるようにクリックボタンを作成してみました.

せいぎょモード

const modal = document.querySelector(".modal");
const selectButton = document.querySelectorAll(".main-container button"); // 버튼의 클래스명은 여러분이 정하시면 됩니다!

selectButton.addEventListener("click", () => {
    modal.style.display = "block";
});

上記のJSコードを追加すると、ボタンをクリックすると、モードのdisplayプロパティが変更され、画面に表示されます.
上記のコードを異なる方法で作成します.

.open {
  display: block !important;
}

const modal = document.querySelector(".modal");
const selectButton = document.querySelectorAll(".main-container button"); 

selectButton.addEventListener("click", () => {
    modal.className = "open"; // 전체 className을 overwriting 하는 방법.
});

OpenというCSSクラスを指定した場合は、HTML要素にclassNameを追加することもできます.ただし、これはclassNameを上書きする方法であるため、既存のclassNameを上書きします.
既存のclassNameを保持する場合は、addまたは切り替えを使用します.
addはclassNameを追加する役割のみを果たし、切り替えは追加と削除を繰り返します.

の最後の部分

私が皆さんに伝えた方法は、画面にどのようにモダリティを表示させるかだけを伝えることです.練習中にオフモードに挑戦すると実力アップに役立ちます!
読んでくれてありがとう!