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;
}
แน่นอนว่าคุณสามารถใช้ CSS เพื่อจัดสไตล์โมดอลของคุณได้ นี่คือตัวอย่างของโค้ด HTML และ CSS เพื่อให้ได้สไตล์ที่ทันสมัยยิ่งขึ้น โดยมีการไล่ระดับสีในพื้นหลัง การเปลี่ยนแปลงขนาดและสีของชื่อเรื่อง และเส้นขอบโค้งมนที่จัดลำดับความสำคัญของช่องว่าง: html Copy code <dialog id= "modalDialog "> <h1 id="modalTitle">ชื่อการทดสอบ</h1> <button id="closeModalBtn">ปิดโมดอล</button> </dialog> <button id="openModalBtn">เปิดโมดอล</ /button> <script> const openModal = document.querySelector( "#openModalBtn" ) const closeModal = document.querySelector( "#closeModalBtn" ) const modal = document.querySelector( "#modalDialog" ) openModal.addEventListener( "คลิก", () = > { modal.showModal() } ) closeModal.addEventListener( "คลิก", () => { modal.close() } ); </script> #modalDialog { ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปทางขวา, #ffffff, #cccccc ); รัศมีเส้นขอบ: 10px; ช่องว่างภายใน: 20px; ความกว้าง: 50%; ความสูง: 50%; ตำแหน่ง: คงที่; ด้านบน: 25%; ซ้าย: 25%; } #modalTitle { ขนาดตัวอักษร: 20px; สี: #666666; การจัดแนวข้อความ: กึ่งกลาง; ขอบล่าง: 20px; } #closeModalBtn { สีพื้นหลัง: #333333; สี: #ffffff; การขยาย: 10px 20px; รัศมีเส้นขอบ: 5px; เส้นขอบ:ไม่มี; ลอย: ขวา; }
spam fails_task lang_mismatch pii not_appropriate hate_speech sexual_content quality toxicity humor helpfulness creativity violence