?? ?? ??? ??? ?? ??????? ??? CSS? ?? ?? ??? ??? ? ????. 1. Target Pseudo-Class? ???? URL ?? ???? ???? ?? ??? ??????. ??? ????? ???? ??? ???? ?? ? ??? ????. 2. ??? ???? ???? ???? ???? ???? ????? ?? ??? ???? ??? ?? ??? ??????. 3. ???, ??? (? : Aria-Label ??) ? ?? ??? ?? (???? ?? : ???)? ?? ??? ?? ?????? ?????. ? ?? ???? ?? ??? ?? ??? ????? ??? ?? ??? ????? ????.

Modal Windows ? Lightboxes? ? ???? ???? ?? ? ?? ???? ?? ???? ??? ??? ???? ???? ?? ???? ???? ? ?????. ?? ????? ??? ??? JavaScript? ???? ??? ??? CSS? ???? ?? ?? ??? ?? ??? ??? ??? ?? ??? ?? ? ? ????.

?? ?? ? ???? ??

?? ?? ???? HTML ???? ????? ??? ?????.

• ??? ?? (? : "???? ??")
• ??? ??? (???? ?? ??)
• ?? ? ??? ?? (?? ???)

CSS? ???? :target ? ?? checked checkbox ??? ??? ??? ??? ?????. :target ? ?? ?? ????? URL? ?? ???? ?????. checkbox ? ???? ?? ?? ?? ???? ????.

 <a href = "#modal"> ?? ?? ? </a>
<div id = "modal"class = "modal">
  <div class = "modal-content">
    <a href = "#"> ?? </a>
    <p> ??? ?? ?????? </p>
  </div>
</div>

??? ? ??? ??

? ??? ?? CSS? ???? ??? ?? ? ??? ??? ?????.

?? : ??? ??

? ??? ?? ???? ???? ??? ????? URL? #modal ???? ?? ??? ???? ?????.

 . ?? {
  ????? : ??;
}

. ?? : ?? {
  ????? : ??;
  ?? : ??;
  ?? : 0; ?? : 0;
  ?? : 100%; ?? : 100%;
  ??? : RGBA (0,0,0,0.5);
}

? ??? ??? JS? ?? ???? ???? ????. ??? ???? ?? ??? ??? ???? ?? ? ???? ???? ?? ?? ?? ? ??? ????.

???? ???? ??? ?????

?? ???? ?? ??? ??? ???? ??? ??? ???? ??? ?? ??? ??, ????? ?? ? ?? ??? ??? ? ????.

 <input type = "checkbox"id = "modal-toggle"hidden>
<label for = "modal-toggle"class = "modal-trigger"> ?? ? </label> ??

<div class = "modal">
  <label for = "modal-toggle"> Close </label>
  <div class = "modal-content">
    <p> ??? ?? </p>???
  </div>
</div>

CSS ?? ????? ?? :

 . ?? {
  ????? : ??;
}

#modal-toggle : ?? ~ .Modal {
  ????? : ??;
}

? ??? ? ?? ???? ?????? ??? ???? ????? ? ????.

?? ? ??? ??

• ??? ? ?? : ??? CSS ???? ????? ?? ???? (? : IE)?? ??? ???? ??? ?? ?????? ??? ? ????.
• ??? (A11Y) : aria-label ?? role="dialog" ? ???? ??? ?? ???? ???? ? ??????.
• ???? ???? ????? . ???? ???? ?? ?? ???? ??? ???? ?? ??? ???? ?? ???? ??? ? ? ????.
• ?? ??? ?? : ?? ?? ???? overflow: hidden ???? ??? ?????? ??? ? ? ????.

?????

CSS? ???? ?? ? ?? ??? ??? ???? ??? ????? ??? ??? ??? ???? ??????. :target Method? ?? ??? ????? Checkbox ???? ??? ????? ? ?????. ??? ??? JS? ???? ??? ????? ??? ?? ??? ? ??? ????? ?????.

????? ????? ??? ??? ?? ??? ??, ??? ???? ?? ?? ? ??? ??? ?? ??? ?? ?? ?? ??? ???? ????.

? ??? CSS? ???? ?? ? ?? ??? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!