もちろん、CSSを使用してモーダルをスタイリングできます。ここには、HTMLとCSSコードの例があり、よりモダンなスタイルを実現します。バックグラデーション、タイトルのサイズと色の変更、空白スペースを優先する丸いエッジを備えています。

HTML
コードをコピーします
<ダイアログID = "modaldialog">
  <h1 id = "modaltitle">テストタイトル</ 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>
#modaldialog {
  背景イメージ：linear -grant（右、#fffffff、#cccccc）;
  ボーダーラジウス：10px;
  パディング：20px;
  幅：50％;
  高さ：50％;
  位置：修正;
  トップ：25％;
  左：25％;
}

#modaltitle {
  フォントサイズ：20px;
  色：＃66666;
  テキストアライグ：センター;
  マージンボトム：20px;
}

#closamodalbtn {
  バックグラウンドカラー：＃333333;
  色：#ffffff;
  パディング：10px 20px;
  ボーダーラジウス：5px;
  国境：なし;
  フロート：そうです;
}
Claro, puedes utilizar CSS para darle estilo a tu modal. Aquí tienes un ejemplo de código HTML y CSS para lograr un estilo más moderno, con gradientes en el fondo, cambios en el tamaño y color de los títulos, y un borde redondeado que priorice el espacio en blanco:

html
Copy code
<dialog id="modalDialog">
  <h1 id="modalTitle">Título de prueba</h1>
  <button id="closeModalBtn">Cerrar el modal</button>
</dialog>

<button id="openModalBtn">Abrir el modal</button>

<script>
  const openModal = document.querySelector( "#openModalBtn" )
  const closeModal = document.querySelector( "#closeModalBtn" )
  const modal = document.querySelector( "#modalDialog" )
  openModal.addEventListener( "click", () => {
    modal.showModal()
  } )
  closeModal.addEventListener( "click", () => {
    modal.close()
  } );
</script>
#modalDialog {
  background-image: linear-gradient( to right, #ffffff, #cccccc );
  border-radius: 10px;
  padding: 20px;
  width: 50%;
  height: 50%;
  position: fixed;
  top: 25%;
  left: 25%;
}

#modalTitle {
  font-size: 20px;
  color: #666666;
  text-align: center;
  margin-bottom: 20px;
}

#closeModalBtn {
  background-color: #333333;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  float: right;
}