آیا این :مدال است؟

این انتخابگر کاذب CSS به شما راهی می دهد تا عناصری را انتخاب کنید که مدال هستند.

Jhey Tompkins

این شبه انتخابگر مفید راهی برای انتخاب عناصر "modal" و جلوگیری از مدیریت کلاس ها در جاوا اسکریپت با ارائه راهی برای شناسایی عناصر مدال در اختیار شما قرار می دهد.

دو نوع عنصر در حال حاضر به عنوان :modal طبقه بندی می شوند:

• عناصر گفتگو با استفاده از روش showModal .
• عناصری که در حالت تمام صفحه هستند.

چگونه می توانید از آن استفاده کنید؟ این مثال مقیاس همه عناصر <dialog> را که :modal هستند را تنظیم می کند.

dialog:modal {
 scale: 2;
}

این نسخه ی نمایشی را در نظر بگیرید که در آن می توانید یک <dialog> را در سبک های "modal" یا "non-modal" نشان دهید.

هنگامی که نسخه "modal" را نشان می دهید، ::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%);
  }
}