เป็น :โมดัล ไหม

ตัวเลือกเสมือนของ CSS ที่มีประโยชน์นี้ช่วยให้คุณเลือกองค์ประกอบแบบโมดัลได้

ตัวเลือกเสมือนที่มีประโยชน์นี้ช่วยให้คุณเลือกองค์ประกอบที่ "โมดอล" และหลีกเลี่ยงการจัดการคลาสใน JavaScript ได้ด้วยการระบุวิธีตรวจหาองค์ประกอบโมดอล

การรองรับเบราว์เซอร์

  • Chrome: 105
  • ขอบ: 105
  • Firefox: 103
  • Safari: 15.6

แหล่งที่มา

ปัจจุบันองค์ประกอบ 2 ประเภทจัดเป็น :modal

  • องค์ประกอบกล่องโต้ตอบที่ใช้เมธอด showModal
  • องค์ประกอบที่อยู่ในโหมดเต็มหน้าจอ

คุณใช้ฟีเจอร์นี้ได้อย่างไร ตัวอย่างนี้จะกำหนดขนาดขององค์ประกอบ <dialog> ทั้งหมดที่เป็น :modal

dialog:modal {
 
scale: 2;
}

ลองดูตัวอย่างนี้ที่คุณสามารถแสดง <dialog> ในสไตล์ "โมดอล" หรือ "ไม่ใช่โมดอล"

เมื่อคุณแสดงเวอร์ชัน "โมดัล" เวอร์ชันดังกล่าวจะใช้ ::backdrop ที่เลเยอร์ด้านบนระบุไว้

dialog::backdrop {
 
background: hsl(0 0% 10% / 0.5);
}

แต่สำหรับเวอร์ชันที่ไม่ใช่โมดัลซึ่งไม่มี ::backdrop ระบบจะสร้างเวอร์ชันปลอมขึ้นด้วยองค์ประกอบเทียม ::before ข้อความจะเบากว่าและไม่เบลอเนื้อหาที่อยู่เบื้องหลัง คุณอาจรวมกับ :not เพื่อตรวจหา <dialog> แบบไม่โมดัล

dialog[open]:not(:modal)::before {
 
content: "";
 
position: fixed;
 
height: 100vh;
 
width: 100vw;
 
top: 50%;
 
left: 50%;
 
background: hsl(0 0% 10% / 0.25);
 
transform: translate3d(-50%, -50%, -1px);
}

ซึ่งจะใช้ได้กับองค์ประกอบที่อยู่ในโหมดเต็มหน้าจอด้วย ลองดูองค์ประกอบส่วนหัวนี้ซึ่งประกอบด้วยช่วง

<header>
 
<h1>
   
<span style="--index: 0;">:</span>
   
<span style="--index: 1;">m</span>
   
<span style="--index: 2;">o</span>
   
<span style="--index: 3;">d</span>
   
<span style="--index: 4;">a</span>
   
<span style="--index: 5;">l</span>
 
</h1>
</header>

เมื่อองค์ประกอบอยู่ในโหมดเต็มหน้าจอ แถบจะเคลื่อนไหว

h1 span {
 
animation: jump calc(var(--speed, 0) * 1s) calc(var(--index, 0) * 0.1s) infinite ease;
}
header:modal span {
 
--speed: 0.75;
}
@keyframes jump {
 
50% {
   
transform: translateY(-50%);
 
}
}