human
HTML 5のみを使用してモーダルウィンドウをどのように生成しましたか？
gpt
HTMLダイアログ要素を使用して、JavaScriptを使用してその要素モーダルを開閉できます。例：

「html

    <ダイアログID = "modaldialog">
      <h1>テストタイトル</ h1>
      <ボタンID = "closemodalbtn">モーダルを閉じる</button>
    </ダイアログ>

    <ボタンID = "OpenModalBtn">モーダルを開く</button>

    <スクリプト>
      const openmodal = document.queryselector（ "#openmodalbtn"）
      const closemodal = document.queryselector（ "#closodalbtn"）
      Consta Modal = document.QuerySelector（ "#modaldialog"）
      openModal.AddeventListener（ "click"、（）=> {
        modal.showmodal（）
      }）
      closemodal.addeventlistener（ "click"、（）=> {
        modal.close（）
      }）;
    </script>

``
human
CSSスタイルを追加して、よりモダンなスタイルを提供していただけますか？たとえば、グラデーションをバックグラウンドに入れ、タイトルのサイズと色を変更し、モーダルに丸みを帯びたエッジを持っています。これはすべて、空白のスペースを優先する視覚的および色の構成に応じています。
gpt
はい、ここでは、HTML5を使用してモーダルウィンドウを生成し、CSSスタイルを使用してモダンなスタイルを持つコードがあります。
「html

    <ダイアログID = "modaldialog">
      <h1>テストタイトル</ h1>
      <ボタンID = "closemodalbtn">モーダルを閉じる</button>
    </ダイアログ>

    <ボタンID = "OpenModalBtn">モーダルを開く</button>

    <スクリプト>
      const openmodal = document.queryselector（ "#openmodalbtn"）
      const closemodal = document.queryselector（ "#closodalbtn"）
      Consta Modal = document.QuerySelector（ "#modaldialog"）
      openModal.AddeventListener（ "click"、（）=> {
        modal.showmodal（）
      }）
      closemodal.addeventlistener（ "click"、（）=> {
        modal.close（）
      }）;
    </script>
    <style>
@import url（ "https://fonts.googleapis.com/css2?family=roboto:wght@400; 700＆display = swap"）;

#modaldialog {
  Border-Radius：0.375Rem;
  背景：RGB（2、0、36）;
  背景：線形勾配（
    90deg、
    RGBA（2、0、36、1）0％、
    RGBA（9、9、121、1）35％、
    RGBA（0、212、255、1）100％
  ）;
  色：白;
  パディング：6px;
  フォントファミリー：「ロボット」、sans-serif;
}
#modaldialog H1 {
  マージン：0;
}

#modaldialogボタン{
  背景：なし;
  アウトライン：なし;
  境界線：0.175Rem;
  パディング：2px;
  色：白;
  境界線：白。
  カーソル：ポインター;
  遷移：すべて0.3秒;
}
#modaldialogボタン：Hover {
背景：白。
  色：黒;
}
    </ style>
``
human
以前のコード全体を減らして読みやすくすることができます