Π Π°Π·Π½ΠΎΠ΅

МодальноС ΠΎΠΊΠ½ΠΎ Ρ‡Ρ‚ΠΎ это: ИспользованиС ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ Π² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсах / Π₯Π°Π±Ρ€

28.06.2021

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

ИспользованиС ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ Π² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсах / Π₯Π°Π±Ρ€

МногиС Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ Π² процСссС создания Ρ†ΠΈΡ„Ρ€ΠΎΠ²Ρ‹Ρ… ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ² ΠΎΡΠ½ΠΎΠ²Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π½Π° свои чувства. НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях это ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ ΠΏΡ€ΠΎΠ²Π΅Ρ€Π΅Π½Π½Ρ‹Π΅ ΠΎΠ±Ρ‰ΠΈΠ΅ стандарты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ логичСски обоснованно ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса вмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π½Π° ΠΈΠ½Ρ‚ΡƒΠΈΡ†ΠΈΡŽ.

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ постараСмся ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΎΠ±Ρ‰ΠΈΠΉ стандарт ΠΌΠΎΠ΄Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсах, ΠΈ ΠΎΠ±ΡΡƒΠ΄ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρƒ, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ лишь Π΄Π²Π° основных Ρ‚ΠΈΠΏΠ° экранов, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ прилоТСния ΠΈ Π²Π΅Π±-сайты тСрпят Π½Π΅ΡƒΠ΄Π°Ρ‡Ρƒ ΠΏΡ€ΠΈ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€ ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΏΠΎΡ‚ΠΎΠΊΠΎΠ² Π² ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятныС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ интСрфСйсы.



НачнСм это исслСдованиС со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ смСлого утвСрТдСния:

БущСствуСт Π΄Π²Π° Ρ‚ΠΈΠΏΠ° экранов:

  1. ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ экраны
  2. ΠΠ΅ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ экраны

А Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠΎΠ·Π²ΠΎΠ»ΡŒΡ‚Π΅ ΠΎΠ±ΡŠΡΡΠ½ΠΈΡ‚ΡŒ это ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠ΅.
ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ экран, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ сСбС ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ, ΠΏΠΎΠΏΠ°Π΄Π°Π΅Ρ‚ Π² ΠΎΠ΄Π½Ρƒ ΠΈΠ· этих Π΄Π²ΡƒΡ… ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Π΅ΠΌ отличаСтся ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ экран ΠΎΡ‚ нСмодального экрана, ΠΌΡ‹ сначала Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΡŽ понятия модального экрана.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Β«ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ экран»?


ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ экраны ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΡ‚ΡŒ Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π΅Π³ΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ… ΠΈ прСдставлСниях, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π½ΠΈΠΆΠ΅ пСрСчислСнных Π² спискС:
  • ΠŸΠΎΠ»Π½ΠΎΡΠΊΡ€Π°Π½Π½Ρ‹Π΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ Π²ΠΈΠ΄Ρ‹
  • Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΎΠΊΠ½Π°
  • Поп-Π°ΠΏΡ‹
  • Лайтбоксы

Как ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ экраны, Ρ‚Π°ΠΊ ΠΈ Π½Π΅ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ экраны ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΌΠΈ прСдставлСниями, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΎΠ½ΠΈ ΠΏΠΎΠ΄Ρ‡ΠΈΠ½Π΅Π½Ρ‹ ΠΎΠ΄Π½ΠΎΠΌΡƒ Π³Π»Π°Π²Π½ΠΎΠΌΡƒ ΠΎΠΊΠ½Ρƒ прилоТСния. Однако, сущСствуСт ΠΎΠ΄Π½ΠΎ Π²Π°ΠΆΠ½ΠΎΠ΅ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅:
«МодальноС ΠΎΠΊΠ½ΠΎ создаСт Ρ€Π΅ΠΆΠΈΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ, Π½ΠΎ сохраняСт Π΅Π³ΠΎ Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ с ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΎΠΊΠ½ΠΎΠΌ Π² Π²ΠΈΠ΄Π΅ Π΄ΠΎΡ‡Π΅Ρ€Π½Π΅Π³ΠΎ ΠΎΠΊΠ½Π° ΠΏΠ΅Ρ€Π΅Π΄ Π½ΠΈΠΌ. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠΎΠ²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΎΠΊΠ½ΠΎΠΌ, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΎΠ½ΠΈ смогут Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ Π² Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅Β» β€” ВикипСдия
Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½, особСнно Π² Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… прилоТСниях, ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ. Π­Ρ‚ΠΎ Π²Π΅Ρ€Π½ΠΎ для Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… ΠΎΠΊΠΎΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΡ‡Π΅Π·Π°ΡŽΡ‚ ΠΈΠ· основного ΠΎΠΊΠ½Π° Π² Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… мСню ΠΈ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Ρ… ΠΎΠΊΠΎΠ½, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… лайтбоксов, ΠΎΠΏΠΎΠ²Π΅Ρ‰Π΅Π½ΠΈΠΉ ΠΈ Ρ‚.ΠΏ.

Однако использованиС модального ΠΎΠΊΠ½Π° Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΎ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ экраны Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‚ вСсь экран устройства. Они большС Π½Π΅ Π΄Π΅Ρ€ΠΆΠ°Ρ‚ основноС ΠΎΠΊΠ½ΠΎ Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ, ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, ΠΈΡ… Ρ‚Ρ€ΡƒΠ΄Π½Π΅Π΅ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΡ‚ΡŒ ΠΎΡ‚

Π½Π΅ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½:


ΠŸΡ€ΠΈΠΌΠ΅Ρ€ iOS: ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах часто ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ прилоТСния.

ОсновноС Ρ€Π°Π·Π»ΠΈΡ‡ΠΈΠ΅ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² способС взаимодСйствия с ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ ΠΈΠ· ΠΎΠΊΠΎΠ½. Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Π½Π΅ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ экран позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ ΠΊ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΌΡƒ экрану, ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ экран Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π·Π°Π²Π΅Ρ€ΡˆΠΈΠ»ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠ΅ дСйствиС, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ Π² Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ (Ρ‚Π°ΠΊΠΎΠ΅ ΠΊΠ°ΠΊ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒΒ» Π² нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅) ΠΈΠ»ΠΈ ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ дСйствиС, Π²Ρ‹Π·Π²Π°Π²ΡˆΠ΅Π΅ модальноС ΠΎΠΊΠ½ΠΎ.

НаиболСС ярким Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ для Π½Π΅ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ являСтся навигация (панСль Π²ΠΊΠ»Π°Π΄ΠΎΠΊ Π² нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅). ΠΠ΅ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ экраны ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π½Π°Π·Π°Π΄ ΠΈ Π²ΠΏΠ΅Ρ€Π΅Π΄ Π½Π° основном ΡƒΡ€ΠΎΠ²Π½Π΅ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ прилоТСния.

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΆΠ΅ экран Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°Π»ΠΈ ΠΎΠΊΠ½ΠΎ, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΎΠ½ΠΈ снова смогут ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡΠ½ΠΎΠ²Π½ΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ прилоТСния (Кнопки Β«Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒΒ» ΠΈΠ»ΠΈ Β«ΠžΡ‚ΠΌΠ΅Π½Π°Β» Π² нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅).

ΠŸΠΎΡ‡Π΅ΠΌΡƒ слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ?


ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ экраны Ρ€Π΅ΡˆΠ°ΡŽΡ‚ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ. И состоит ΠΎΠ½Π° Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ β€” ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π»Π΅Π³ΠΊΠΎ ΠΎΡ‚Π²Π»Π΅ΠΊΠ°ΡŽΡ‚ΡΡ, поэтому ΠΈΠ½ΠΎΠ³Π΄Π° приходится ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚ΡŒ ΠΈΡ… ΠΏΠΎΠ»Π½ΠΎΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ Π±Π»ΠΎΠΊ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ (источник). ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ экран Π΄Π΅Π»Π°Π΅Ρ‚ ΠΈΠΌΠ΅Π½Π½ΠΎ это β€” Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ люди ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΠΈΠ»ΠΈΡΡŒ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ Π·Π°Π΄Π°Ρ‡Π΅, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π² основном ΠΏΠΎΡ‚ΠΎΠΊΠ΅ прилоТСния.
Β«ΠœΠΎΠ΄Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ создаСт фокусировку, Π½Π΅ давая людям Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒΡΡ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Π΄Π΅Π»Π°ΠΌΠΈ, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΎΠ½ΠΈ Π½Π΅ Π·Π°Π²Π΅Ρ€ΡˆΠ°Ρ‚ Π·Π°Π΄Π°Ρ‡Ρƒ ΠΈΠ»ΠΈ Π½Π΅ отклонят Π²Ρ‹Π·Π²Π°Π½Π½ΠΎΠ΅ Π² модальном ΠΎΠΊΠ½Π΅ прСдставлСниС» β€” Apple

Когда слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ?


Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ Π·Π½Π°Π΅ΠΌ, ΠΊΠ°ΠΊ выглядит ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ экран. Как ΠΆΠ΅ ΡΡ€Π°Π²Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ с Π½Π΅ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ экраном ΠΈ ΠΊΠ°ΠΊΠΎΠ²Π° Π΅Π³ΠΎ Ρ†Π΅Π»ΡŒ? ΠŸΡ€Π΅ΠΆΠ΄Π΅ всСго ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΏΡ€ΠΎΡΠΈΡ‚ΡŒ сСбя: Β«Π’ ΠΊΠ°ΠΊΠΎΠΉ ситуации ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ?Β»

Π”Π°Π²Π°ΠΉΡ‚Π΅ прСдставим, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ создаСм Β«Π³Π΅Π½ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈ ΠΈΠ½Π½ΠΎΠ²Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉΒ» стартап ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Β«PurrrfectΒ». Π­Ρ‚ΠΎ Π±Π°Π·Π° Π΄Π°Π½Π½Ρ‹Ρ… котят, которая позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ, ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ ΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ GIF-изобраТСния ΠΌΠΈΠ»Ρ‹Ρ… котяток.

Π£ΠΏΡ€ΠΎΡ‰Π΅Π½Π½Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΏΠΎΡ‚ΠΎΠΊ нашСго прилоТСния ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ: ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π²Ρ…ΠΎΠ΄ΠΈΡ‚ Π² ΠΎΠ΄Π½Ρƒ ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… доступных Π²ΠΊΠ»Π°Π΄ΠΎΠΊ (наша Π±Π°Π·Π° Π΄Π°Π½Π½Ρ‹Ρ… ΠΎ котятах), Π·Π°Ρ‚Π΅ΠΌ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚ Π½Π° ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· котят (Π²Ρ…ΠΎΠ΄ΠΈΡ‚ Π² ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ΅ прСдставлСниС ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠΎΡ‚Ρ‘Π½ΠΊΠ°) ΠΈ Π·Π°Ρ‚Π΅ΠΌ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚ Π½Π° Ρ€Π°Π·Π΄Π΅Π» ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π² (Π²Ρ…ΠΎΠ΄ΠΈΡ‚ Π² Ρ€Π°Π·Π΄Π΅Π» ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π² прСдставлСния ΠΊΠΎΡ‚Ρ‘Π½ΠΊΠ°).


ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΏΠΎΡ‚ΠΎΠΊ прилоТСния Β«PurrrfectΒ»

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ дСйствия Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΈΠ· этапов. НапримСр, ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ ΠΊΠΎΡ‚Ρ‘Π½ΠΊΠ° Π² Π±Π°Π·Ρƒ Π΄Π°Π½Π½Ρ‹Ρ… Π½Π° экранС списка котят.

Или ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ Π½Π° экранС подробностСй ΠΊΠΎΡ‚Π΅Π½ΠΊΠ°.

А Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π°Π΄ΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ· этих экранов являСтся ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ, Π° ΠΊΠ°ΠΊΠΎΠΉ Π½Π΅Ρ‚? ΠšΠ»Π°ΡΡΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡ Π² Π΄Π°Π½Π½ΠΎΠΌ случаС Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ, Π½ΠΎ Π²ΠΎΡ‚ ΠΌΠΎΡ‘ Π»ΠΈΡ‡Π½ΠΎΠ΅ эмпиричСскоС ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ:

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ экраны для Π°Π²Ρ‚ΠΎΠ½ΠΎΠΌΠ½Ρ‹Ρ… процСссов, Π° Π½Π΅ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ экраны для всСго ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ.
«Автономный процСсс» β€” это ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ΅ дСйствиС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‡Π΅Ρ‚ΠΊΡƒΡŽ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΡƒΡŽ ΠΈ ΠΊΠΎΠ½Π΅Ρ‡Π½ΡƒΡŽ Ρ‚ΠΎΡ‡ΠΊΡƒ Π² процСссС.

Π’ Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠ³ΠΎ ΠΏΠ΅Ρ€ΠΈΠΎΠ΄Π° Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ этого дСйствия ΠΎΠ½ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈΠ· ΠΎΠ±Ρ‰Π΅Π³ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, позволяя Π΅ΠΌΡƒ ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΠΈΡ‚ΡŒΡΡ Π½Π° дСйствии ΠΈ Π·Π°Ρ‚Π΅ΠΌ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Π΅Π³ΠΎ Π² Ρ‚Ρƒ Ρ‚ΠΎΡ‡ΠΊΡƒ ΠΏΠΎΡ‚ΠΎΠΊΠ°, ΠΎΡ‚ΠΊΡƒΠ΄Π° ΠΎΠ½ Π½Π°Ρ‡Π°Π» это дСйствиС.

Google Ρ„ΠΎΡ€ΠΌΡƒΠ»ΠΈΡ€ΡƒΠ΅Ρ‚ это ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ экраны (Π΄ΠΈΠ°Π»ΠΎΠ³ΠΈ) для отобраТСния «критичСской ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, которая Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΉ Π·Π°Π΄Π°Ρ‡ΠΈ, Π΅Ρ‘ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ подтвСрТдСния» β€” Google

Π’ случаС нашСго прилоТСния Β«PurrrfectΒ» это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ основной ΠΏΠΎΡ‚ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ (ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ для исслСдования прилоТСния) Π½Π΅ являСтся ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ.

Однако ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹Π΅ ΠΏΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ дСйствия, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ котят, Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ котят ΠΈ написаниС ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π², ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ.

ВсС ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ дСйствия ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ΠΌΠ΅Π½Π΅Π½Ρ‹ Π»ΠΈΠ±ΠΎ ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½Ρ‹, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ вСрнСтся Π² основной ΠΏΠΎΡ‚ΠΎΠΊ. По этой ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ экраны ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«ΠžΡ‚ΠΌΠ΅Π½Π°Β» ΠΈ Β«Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒΒ» (ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ подтвСрТдСния дСйствия) вмСсто ΠΊΠ½ΠΎΠΏΠΊΠΈ «Назад». Если ваша ΠΊΠ½ΠΎΠΏΠΊΠ° «Назад» ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ запускаСт дСйствиС сохранСния Π½Π° нСмодальном экранС, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° Π½Π° ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ экран, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«ΠžΡ‚ΠΌΠ΅Π½Π°Β» ΠΈ Β«Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒΒ».

Однако Π²Π΅Ρ€Π½ΠΎ ΠΈ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠ΅: Ссли Π΄Π²Π° Ρ€Π°Π·Π½Ρ‹Ρ… дСйствия, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Β«ΠžΡ‚ΠΌΠ΅Π½Π°Β» ΠΈ Β«Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒΒ», Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ смысла Π½Π° вашСм модальном экранС (ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π²Ρ‹Π·ΠΎΠ²ΡƒΡ‚ ΠΎΠ΄Π½ΠΎ ΠΈ Ρ‚ΠΎ ΠΆΠ΅ дСйствиС), Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒΡΡ Π½Π° нСмодальноС прСдставлСниС. Π’ этом случаС основная навигация (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, панСль Π²ΠΊΠ»Π°Π΄ΠΎΠΊ) Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ Π½Π° экранС.

Π”Π°Π²Π°ΠΉΡ‚Π΅ вСрнСмся ΠΊ Π½Π°ΡˆΠ΅ΠΌΡƒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡŽ. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ΠΉ интСрфСйс для Β«PurrrfectΒ» ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:


ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс Β«PurrrfectΒ»

Π’ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ ΠΌΠΈΡ€Π΅ Ρ€Π°Π·Π»ΠΈΡ‡ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΈ Π½Π΅ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ экранами Π·Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ ΠΌΠ΅Π½Π΅Π΅ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ. НапримСр, полноэкранный Π²ΠΈΠ΄ изобраТСния являСтся ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, хотя это Π½Π΅ процСсс ΠΈΠ»ΠΈ Π΄ΠΈΠ°Π»ΠΎΠ³. ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ экран ΠΌΠΎΠΆΠ΅Ρ‚ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Ρ‚ΡŒ смысл Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… особых ситуациях, ΠΊΠΎΠ³Π΄Π° Π½ΡƒΠΆΠ½ΠΎ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ фокус ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π½Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ Π±Π»ΠΎΠΊΠ΅ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ. Если Π±Ρ‹ наш ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹ΠΉ экран ΠΊΠΎΡ‚Ρ‘Π½ΠΊΠ° (Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅) Π±Ρ‹Π» ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ Π±Π΅Π· Π΄Ρ€ΡƒΠ³ΠΈΡ… дСйствий, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ, ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ (полноэкранный просмотр). Но Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π³Π»ΡƒΠ±ΠΆΠ΅ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΏΠΎ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π΅ ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ дСйствия (ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ, Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Ρ‚.ΠΏ.), Ρƒ Π½Π΅Π³ΠΎ большС Π½Π΅Ρ‚ Ρ‡Ρ‘Ρ‚ΠΊΠΎΠΉ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ, ΠΈ поэтому ΠΎΠ½ являСтся Ρ‡Π°ΡΡ‚ΡŒΡŽ основного ΠΏΠΎΡ‚ΠΎΠΊΠ°. Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, это нСмодальноС прСдставлСниС.

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ обязан ΠΎΡ†Π΅Π½ΠΈΡ‚ΡŒ, являСтся Π»ΠΈ дСйствиС Π°Π²Ρ‚ΠΎΠ½ΠΎΠΌΠ½Ρ‹ΠΌ ΠΈΠ»ΠΈ Ρ‡Π°ΡΡ‚ΡŒΡŽ ΠΎΠ±Ρ‰Π΅Π³ΠΎ процСсса ΠΏΠΎΡ‚ΠΎΠΊΠ° прилоТСния, ΠΈ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ, Π΄Π΅Π»Π°Ρ‚ΡŒ экран ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΈΠ»ΠΈ Π½Π΅Ρ‚.

Π’ случаС возникновСния сомнСний, вспоминайтС эту Ρ†ΠΈΡ‚Π°Ρ‚Ρƒ:

ΠœΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΡƒΠΉΡ‚Π΅ использованиС ΠΌΠΎΠ΄Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, люди ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽΡ‚ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с прилоТСниями Π½Π΅Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΌΠΈ способами. РассматривайтС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ создания модального контСкста Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Ρ‚Π΅Ρ… случаях, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Ρ‡ΡŒΠ΅-Π»ΠΈΠ±ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠΎΠ³Π΄Π° Π·Π°Π΄Π°Ρ‡Π° Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½Π° ΠΈΠ»ΠΈ ΠΏΡ€Π΅ΠΊΡ€Π°Ρ‰Π΅Π½Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ использованиС прилоТСния ΠΈΠ»ΠΈ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π²Π°ΠΆΠ½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅. β€” Apple

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, интСрфСйс ΠΌΠΎΠΆΠ΅Ρ‚ прСкрасно Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π±Π΅Π· строгого различия ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΈ Π½Π΅ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ прСдставлСниями. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, концСпция ΠΌΠΎΠ΄Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π³Π»ΡƒΠ±ΠΎΠΊΠΎ Π·Π°Π»ΠΎΠΆΠ΅Π½Π° Π² интСрфСйсных экосистСмах Apple, Google, Microsoft ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ оТидания для своих постоянных ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

Как слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ?


К настоящСму Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ надСюсь Ρ‡Ρ‚ΠΎ Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΎ ΠΎΠ±Ρ‰Π΅Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ. ΠžΡΡ‚Π°Π΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ вопрос: «Как ΠΌΡ‹ спроСктируСм ΠΌΠΎΠ΄Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ?Β». Π’ΠΎΡ‚ быстрый чСклист для использования ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… экранов:
  • ВсСгда ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΠΉΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ закрытия/скрытия модального ΠΎΠΊΠ½Π° (ΠΈΠ»ΠΈ Β«ΠΎΡ‚ΠΌΠ΅Π½Π°Β», Β«ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒΒ», Β«ΡΠ²Π΅Ρ€Π½ΡƒΡ‚ΡŒΒ») Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ тСряСтся, ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ Π»Π΅Π³ΠΊΠΎ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠ΅ ΠΎΠΊΠ½ΠΎ ΠΈ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ Π½Π° ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ прилоТСния, ΠΎΡ‚ΠΊΡƒΠ΄Π° Π±Ρ‹Π»ΠΎ Π²Ρ‹Π·Π²Π°Π½ΠΎ модальноС ΠΎΠΊΠ½ΠΎ.
  • Кнопки ΠΎΡ‚ΠΌΠ΅Π½Ρ‹ Π½Π° iOS ΠΈ Android Ρ‡Π°Ρ‰Π΅ всСго Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Π»Π΅Π²ΠΎΠΉ части ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Android ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅Ρ‚ ΠΈΠΊΠΎΠ½ΠΊΡƒ закрытия Β«XΒ», Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ iOS ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΡƒ с надписью Β«ΠžΡ‚ΠΌΠ΅Π½Π°Β». Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ Ρ‚Π°ΠΊΠΆΠ΅ довольно распространСн ΠΈ Π² iOS.
  • Кнопки подтвСрТдСния дСйствия Π½Π° модальном ΠΎΠΊΠ½Π΅ Π² iOS ΠΈ Android ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ располоТСны Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ ΠΏΡ€Π°Π²ΠΎΠΉ части ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, это Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ нСдоступным для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π½Π° устройствах с большой диагональю. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ фиксированноС ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Ρ‚Π°ΠΊΠΎΠ³ΠΎ Π² Π½ΠΈΠΆΠ½Π΅ΠΉ части экрана ΠΈΠ»ΠΈ Π² ΠΊΠΎΠ½Ρ†Π΅ страницы ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ΠΏΠ»ΠΎΡ…ΠΈΠΌ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ.

ΠœΠ½ΠΎΠ³ΠΎΡΡ‚ΡƒΠΏΠ΅Π½Ρ‡Π°Ρ‚Ρ‹Π΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π°


ВсС становится слоТнСС, ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ модальноС Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ состоит ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… шагов ΠΈΠ»ΠΈ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… экранов. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΊΠ½ΠΎΠΏΠΊΠ° продолТСния дСйствия отобраТаСтся Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ. Π­ΠΊΡ€Π°Π½ Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ шага Π½Π΅ ΠΎΡ‚ΠΊΡ€ΠΎΠ΅Ρ‚ Π½ΠΎΠ²Ρ‹ΠΉ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ экран, Π½ΠΎ вмСсто этого остаСтся Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ модального экрана ΠΈ отобраТаСтся ΠΊΠ°ΠΊ Π½Π΅ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΉ экран (Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ возмоТности Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ΠΌΠ΅Π½Ρ‘Π½Π½Ρ‹ΠΌ) ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ модального налоТСния Π² Π²ΠΈΠ΄Π΅ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ шага модального ΠΎΠΊΠ½Π°.

ΠŸΡ€ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΈ основного дСйствия (Β«ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒΒ», Β«ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒΒ» ΠΈΠ»ΠΈ Β«ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒΒ») Π² Π½ΠΈΠΆΠ½Π΅ΠΉ части экрана (ΠΊΠ°ΠΊ Π±Ρ‹Π»ΠΎ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π½ΠΎ Ρ€Π°Π½Π΅Π΅) Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ ΠΏΡ€Π°Π²ΠΎΠΉ области Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ шага модального Π±Π»ΠΎΠΊΠ° всСгда освобоТдаСтся мСсто для Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡ‚ΠΌΠ΅Π½Ρ‹. Π₯отя ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ выглядит Π±ΠΎΠ»Π΅Π΅ Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΌ слСва Π½Π°ΠΏΡ€Π°Π²ΠΎ, это Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ всС ΠΆΠ΅ Π»ΡƒΡ‡ΡˆΠ΅ для модального ΠΎΠΊΠ½Π°, Ρ‡Π΅ΠΌ отсутствиС возмоТности Π·Π°ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ экран Π½Π° Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… (ΠΏΡ€Π΅Π΄ΡˆΠ΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ…) экранах.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅


МногиС Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹, ΠΎΡΠ½ΠΎΠ²Ρ‹Π²Π°ΡΡΡŒ Π½Π° своих чувствах. И ΠΈΠ½ΠΎΠ³Π΄Π° интуиция Π²Π°ΠΆΠ½Π΅Π΅ Π½ΠΎΡ€ΠΌΡ‹, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π² этом Π·Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ ΠΈ Π΅ΡΡ‚ΡŒ ΡΡƒΡ‚ΡŒ творчСства. Однако ΠΈΠΌΠ΅Π΅Ρ‚ смысл Π·Π½Π°Ρ‚ΡŒ ΠΎΠ±Ρ‰ΠΈΠ΅ стандарты ΠΌΠΎΠ΄Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π² Π½ΡƒΠΆΠ½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΠΏΠΎΠ΄ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΡ… ΠΏΠΎΠ΄ основной ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΏΠΎΡ‚ΠΎΠΊ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ.

Π§Ρ‚ΠΎ это Ρ‚Π°ΠΊΠΎΠ΅ МодальноС ΠΎΠΊΠ½ΠΎ. ЭнциклопСдия

                                     

2. ΠšΡ€ΠΈΡ‚ΠΈΠΊΠ°

МодальноС ΠΎΠΊΠ½ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π±Π»ΠΎΠΊΠΈΡ€ΡƒΠ΅Ρ‚ вСсь Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ процСсс Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΠΎ. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠΊΠ½ΠΎ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ Π΅Π³ΠΎ внимания, ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ Π½Π΅ понимая, ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ Π½Π΅ Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΠ΅Ρ‚ Π½Π° Π΅Π³ΠΎ дСйствия.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ созданиС ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ являСтся Π½Π΅ΠΎΡ‚ΡŠΠ΅ΠΌΠ»Π΅ΠΌΠΎΠΉ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ любой срСды ΠΏΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ графичСского интСрфСйса, эти ΠΎΠΊΠ½Π° ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡŽΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅. Π‘Ρ‚ΠΎΡ€ΠΎΠ½Π½ΠΈΠΊΠΈ использования этой Ρ‚Π΅Ρ…Π½ΠΈΠΊΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΡΡ‡ΠΈΡ‚Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ большоС количСство Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Ρ… ΠΎΠΊΠΎΠ½, ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ свободно ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒΡΡ, ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°ΠΏΡƒΡ‚Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Π° Π·Π½Π°Ρ‡ΠΈΡ‚, Π»ΡƒΡ‡ΡˆΠ΅ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ возмоТности Π²Π²ΠΎΠ΄Π° Π΄ΠΎ ΠΏΡ€Π΅Π΄Π΅Π»Π° Π² ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.

БпСциалисты ΠΏΠΎ эргономикС, Π½Π°ΠΏΡ€ΠΎΡ‚ΠΈΠ², ΡΡ‡ΠΈΡ‚Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ Π² ΠΏΠΎΠ΄Π°Π²Π»ΡΡŽΡ‰Π΅ΠΌ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ ситуаций ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ свободы дСйствий ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈ строгая ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ этих дСйствий ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ сущСствСнному ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡŽ удобства ΠΈ расстраиваСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. ИспользованиС ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ заставляСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΊΠΎΠ½Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ своё Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΊΠ°ΠΊΠΎΠΌ-Ρ‚ΠΎ ΠΎΠ΄Π½ΠΎΠΌ аспСктС Π·Π°Π΄Π°Ρ‡ΠΈ, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с большими ΠΎΠ±ΡŠΡ‘ΠΌΠ°ΠΌΠΈ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, Ρ€Π°Π·ΠΌΠ΅Ρ‰Ρ‘Π½Π½Ρ‹ΠΌΠΈ Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΎΠΊΠ½Π°Ρ… прилоТСния ΠΈ постоянно ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ. Π’ Ρ‚Π°ΠΊΠΈΡ… случаях использованиС ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ Π²Π΅Π΄Π΅Ρ‚ ΠΊ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡŽ эффСктивности Ρ€Π°Π±ΠΎΡ‚Ρ‹.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΎΠΊΠ½Π°, модального ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ стола, ΠΌΠΎΠ³Π»ΠΎ Π½Π°Ρ€ΡƒΡˆΠΈΡ‚ΡŒ Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ всСй систСмы Π² Ρ†Π΅Π»ΠΎΠΌ. НапримСр, такая функция Π±Ρ‹Π»Π° прСдусмотрСна Π² Microsoft Windows 3.x, 95 ΠΈ 98, ΠΎΠ΄Π½Π°ΠΊΠΎ Π±Ρ‹Π»Π° ΡƒΠ±Ρ€Π°Π½Π° ΠΈΠ· NT ΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… вСрсий, ΠΈ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΎΠΊΠ½Π° ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ систСмы большС Π½Π΅ Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Π»Π° доступ ΠΊ Π½Π΅ΠΉ.

Π’ΠΎ всСх ОБ Microsoft Windows ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΠ΅ модальноС ΠΎΠΊΠ½ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π±Π»ΠΎΠΊΠΈΡ€ΡƒΠ΅Ρ‚ взаимодСйствиС с Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ ΠΎΠΊΠ½ΠΎΠΌ, Π² Ρ‚ΠΎΠΌ числС Π½Π΅ позволяя ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² Π΄Ρ€ΡƒΠ³ΠΎΠ΅ мСсто Π½Π° экранС ΠΈΠ»ΠΈ ΡΠ²Π΅Ρ€Π½ΡƒΡ‚ΡŒ. Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях ΠΈΠ·-Π·Π° Π½Π΅Π΄ΠΎΡ€Π°Π±ΠΎΡ‚ΠΎΠΊ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния, ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠΈ Π·Π°Π΄Π°Ρ‡ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΏΠΎΠ·Π°Π΄ΠΈ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΎΠΊΠ½Π°, ΠΈΠ·-Π·Π° Ρ‡Π΅Π³ΠΎ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ взаимодСйствиС с ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΎΠΉ становится Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ΠΌ.

ΠŸΡ€ΠΈ большом количСствС ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ становится слоТно ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ΅ ΠΎΠΊΠ½ΠΎ, особСнно Ссли Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ модального ΠΎΠΊΠ½Π° нСдостаточно ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ для этого Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎ нСсколько ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Для этого приходится Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠΈ взаимодСйствия со всСми ΠΎΠΊΠ½Π°ΠΌΠΈ, ΠΏΠΎΠΊΠ° Π½Π΅ найдётся Π·Π°Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅.

Π›ΡƒΡ‡ΡˆΠΈΠ΅ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΈ примСнСния ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ | by Writes

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π°, ΠΎΠ²Π΅Ρ€Π»Π΅ΠΈ, Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π°, ΠΊΠ°ΠΊ Π±Ρ‹ Π²Ρ‹ ΠΈΡ… Π½Π΅ Π½Π°Π·Ρ‹Π²Π°Π»ΠΈ, настало врСмя ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΎΠ± этих UI ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½Π°Ρ…. Когда ΠΎΠ½ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ появились Π½Π° сцСнС, ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Π±Ρ‹Π»ΠΈ элСгантным Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ интСрфСйса. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, ΠΎΠ½ΠΈ ΡƒΠΏΡ€ΠΎΡ‰Π°Π»ΠΈ интСрфСйс, Π²ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…, экономили экранноС пространство. Π‘ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ с Π³ΠΎΡ‚ΠΎΠ²Π½ΠΎΡΡ‚ΡŒΡŽ приняли ΠΈΡ… Π½Π° Π²ΠΎΠΎΡ€ΡƒΠΆΠ΅Π½ΠΈΠ΅, Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅, стали ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… Π² Ρ‚Π΅ΠΌΠ½Ρ‹Ρ… ΡˆΠ°Π±Π»ΠΎΠ½Π°Ρ…. ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΠ»ΠΈΡΡŒ Π² ΡΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… ΠΎΠΊΠΎΠ½. Они Π½Π°Π΄ΠΎΠ΅Π΄Π°ΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ β€” Ρ‚Π΅, Π΄Π°ΠΆΠ΅, Π½Π°ΡƒΡ‡ΠΈΠ»ΠΈΡΡŒ инстинктивно ΠΈ автоматичСски ΠΈΡ… Π·Π°ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ.

Π’ графичСском интСрфСйсС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ называСтся ΠΎΠΊΠ½ΠΎ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±Π»ΠΎΠΊΠΈΡ€ΡƒΠ΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ с Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ это ΠΎΠΊΠ½ΠΎ Π½Π΅ Π·Π°ΠΊΡ€ΠΎΠ΅Ρ‚. ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ прСимущСствСнно Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ‹ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π°. Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для привлСчСния внимания ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΊ Π²Π°ΠΆΠ½ΠΎΠΌΡƒ ΡΠΎΠ±Ρ‹Ρ‚ΠΈΡŽ ΠΈΠ»ΠΈ критичСской ситуации. β€” wikipedia

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для:

  • ΠŸΡ€ΠΈΠ²Π»Π΅Ρ‡Π΅Π½ΠΈΡ внимания ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΈΡ…, ΠΊΠΎΠ³Π΄Π° Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€Π΅Ρ€Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ процСсс для привлСчСния Π΅Π³ΠΎ внимания ΠΊ Ρ‡Π΅ΠΌΡƒ-Ρ‚ΠΎ Π±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΠΎΠΌΡƒ.
  • ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΡ ΠΎΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈΠ»ΠΈ авторизация).
  • ДСмонстрации Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π² контСкстС (ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½Π½Ρ‹Π΅ изобраТСния, Π²ΠΈΠ΄Π΅ΠΎ)
  • ДСмонстрации Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π±Π΅Π· контСкста (увСдомлСния)

Π—Π°ΠΌΠ΅Ρ‚ΠΊΠ°: Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° для отобраТСния сообщСний ΠΎΠ± ошибкС, успСхС ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΈ, ΠΈΠ»ΠΈ прСдупрСТдСния.

ΠŸΠ»ΠΎΡ…ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΎΠ²Π΅Ρ€Π»Π΅ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠΌΠ΅ΡˆΠ°Ρ‚ΡŒ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡŽ Π·Π°Π΄Π°Ρ‡ΠΈ. Π§Ρ‚ΠΎΠ±Ρ‹ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ вашС модальноС ΠΎΠΊΠ½ΠΎ Π½ΠΈΡ‡Π΅ΠΌΡƒ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡˆΠ°Π΅Ρ‚, Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ Π² Π½Π΅Π³ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ элСмСнты:

ΠŸΠΎΠ·Π²ΠΎΠ»ΡŒΡ‚Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΈΠ·Π±Π°Π²ΠΈΡ‚ΡŒΡΡ ΠΎΡ‚ ΠΎΠΊΠ½Π°, прСдоставив ΠΈΠΌ способ Π΅Π³ΠΎ закрытия. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ способами:

  • Кнопка ΠΎΡ‚ΠΌΠ΅Π½Ρ‹
  • Кнопка закрытия
  • Π—Π°ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ ΠΏΠΎ Π½Π°ΠΆΠ°Ρ‚ΠΈΡŽ клавиши Β«escapeΒ»
  • Π—Π°ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡƒ Π½Π° пространствС Π²Π½Π΅ модального ΠΎΠΊΠ½Π°

ΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΡŒΡ‚Π΅ контСкст ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°. Π­Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ ΠΏΠΎΠ½ΡΡ‚ΡŒ Π³Π΄Π΅ ΠΎΠ½ находится, ΠΈ Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π½Π΅ Π±Ρ‹Π» ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ с ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠΉ страницы.

Π‘ΠΎΠ²Π΅Ρ‚: надпись Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ (Π·Π°ΠΏΡƒΡΠΊΠ°ΡŽΡ‰Π΅ΠΉ модальноС ΠΎΠΊΠ½ΠΎ) ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠ²ΠΏΠ°Π΄Π°Ρ‚ΡŒ

Названия ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ дСйствиС ΠΈ Π±Ρ‹Ρ‚ΡŒ понятными. Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½, Π½ΠΎ ΠΈ ΠΊΠΎ всСм ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ. Π’ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠ½Π°Ρ…, ΠΊΠ½ΠΎΠΏΠΊΠ° Β«closeΒ» Π΄ΠΎΠ»ΠΆΠ½Π° ΠΏΡ€ΠΈΡΡƒΡ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π² Π²ΠΈΠ΄Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ с надписью Β«closeΒ», ΠΈΠ»ΠΈ просто Β«Ρ…Β».

Π‘ΠΎΠ²Π΅Ρ‚: Π½Π΅ ΠΏΡƒΡ‚Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ названиями. Если ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ пытаСтся ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΡŽ, послС Ρ‡Π΅Π³ΠΎ выскакиваСт модальноС ΠΎΠΊΠ½ΠΎ, с ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Β«cancelΒ» β€” Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ ΠΏΡƒΡ‚Π°Π½ΠΈΡ†Π°. Β«Π― ΠΎΡ‚ΠΌΠ΅Π½ΡΡŽ ΠΎΡ‚ΠΌΠ΅Π½Ρƒ Ρ‚ΠΎΠΉ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΈ? Или это ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ‚ΠΌΠ΅Π½Ρ‹?Β»

МодальноС ΠΎΠΊΠ½ΠΎ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ слишком малСньким ΠΈΠ»ΠΈ слишком большим. ЦСль β€” сохранСниС контСкста, Π° ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, модальноС ΠΎΠΊΠ½ΠΎ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π·Π°ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ собой вСсь экран. ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄ модальноС ΠΎΠΊΠ½ΠΎ. Если Π΅ΡΡ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ Π² использовании ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, Ρ‚ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, вмСсто модального ΠΎΠΊΠ½Π° Π»ΡƒΡ‡ΡˆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ страницу.

  • Π Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ β€” вСрхняя Ρ‡Π°ΡΡ‚ΡŒ экрана, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π½Π° экранах ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств, Ссли Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ модальноС ΠΎΠΊΠ½ΠΎ Π½ΠΈΠΆΠ΅, Ρ‚ΠΎ ΠΎΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡ‚Π΅Ρ€ΡΡ‚ΡŒΡΡ
  • Π Π°Π·ΠΌΠ΅Ρ€ β€” Π½Π΅ Π±ΠΎΠ»Π΅Π΅ 50% экранного пространства

ΠŸΡ€ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠΈ модального ΠΎΠΊΠ½Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ эффСкт lightbox (Π·Π°Ρ‚Π΅ΠΌΠ½Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π°). Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ ΠΎΠΊΠ½Ρƒ ΠΈ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ страницСй.

Π‘ΠΎΠ²Π΅Ρ‚: помСститС фокус ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ Π½Π° модальноС ΠΎΠΊΠ½ΠΎ

НС ΠΏΡƒΠ³Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. ΠŸΠΎΠ·Π²ΠΎΠ»ΡŒΡ‚Π΅ Π΅Π³ΠΎ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ, (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ, ссылку, ΠΈΠ»ΠΈ Π²Ρ‹Π±ΠΎΡ€ ΠΎΠΏΡ†ΠΈΠΈ) Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ модальноС ΠΎΠΊΠ½ΠΎ. Π’Π½Π΅Π·Π°ΠΏΠ½ΠΎΠ΅ появлСниС модального ΠΎΠΊΠ½Π° ΠΌΠΎΠΆΠ΅Ρ‚ привСсти ΠΊ быстрому Π΅Π³ΠΎ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΠΈΡŽ.

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ устройства, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ, Π½Π΅ Π΄Ρ€ΡƒΠΆΠ°Ρ‚. Они ΡƒΡΠ»ΠΎΠΆΠ½ΡΡŽΡ‚ просмотр ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ модальноС ΠΎΠΊΠ½ΠΎ Π»ΠΈΠ±ΠΎ слишком большоС, Π»ΠΈΠ±ΠΎ слишком малСнькоС. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚Π°ΠΊΠΈΠ΅ элСмСнты, ΠΊΠ°ΠΊ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π° ΠΈ скроллбары, ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ придСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΈ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ полями модального ΠΎΠΊΠ½Π°. Π’ случаС с ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌΠΈ устройствами, ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Π»ΡƒΡ‡ΡˆΠΈΠ΅ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹.

ΠŸΡ€ΠΈ создании ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ Π½Π΅ Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ ΠΎ доступС ΠΊ Π½ΠΈΠΌ с ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹. РассмотритС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ модального ΠΎΠΊΠ½Π° β€” Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΠΉΡ‚Π΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ доступа ΠΊ элСмСнту, ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡƒ модальноС ΠΎΠΊΠ½ΠΎ, с ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹

ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ фокуса Π² Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ –фокус ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠΌΠ΅Ρ‰Π΅Π½ Π² модальноС ΠΎΠΊΠ½ΠΎ сразу послС Π΅Π³ΠΎ открытия

Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ фокусом ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ β€” ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ фокус ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠΌΠ΅Ρ‰Π΅Π½ Π² Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ, ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ Ρ‚Π°ΠΌ Π΄ΠΎ Π΅Π³ΠΎ закрытия

Π—Π°ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ модального ΠΎΠΊΠ½Π° β€” Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΠΉΡ‚Π΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ закрытия овСрлСя с ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹

Accessible Rich Internet Applications (ARIA) ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ доступныС прилоТСния ΠΈ Π²Π΅Π± ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ARIA тэги ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌΠΈ для создания доступного модального ΠΎΠΊΠ½Π°:

Role = β€œdialog”, aria-hidden, aria-label

Π’Π°ΠΊΠΆΠ΅, Π½Π΅ Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅ ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΡ… с ослаблСнным Π·Ρ€Π΅Π½ΠΈΠ΅ΠΌ. Они ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ экрана для чтСния ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. ΠŸΡ€ΠΈ этом, послС увСличСния, Ρ‚Π°ΠΊΠΎΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Π°ΡΡ‚ΡŒ экрана. Π’ этом случаС, ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅ эффСкт, ΠΊΠ°ΠΊ ΠΈ Π² случаС с ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌΠΈ устройствами.

Если люди Π½Π°ΡƒΡ‡ΠΈΠ»ΠΈΡΡŒ автоматичСски Π·Π°ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π°, Ρ‚ΠΎ Π·Π°Ρ‡Π΅ΠΌ Π²ΠΎΠΎΠ±Ρ‰Π΅ ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ?

ΠŸΡ€ΠΈΠ²Π»Π΅Ρ‡Π΅Π½ΠΈΠ΅ внимания, сохранСниС контСкста ΠΈ ΡƒΠΏΡ€ΠΎΡ‰Π΅Π½ΠΈΠ΅ интСрфСйса β€” Ρ…ΠΎΡ€ΠΎΡˆΠΈΠ΅ прСимущСства ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½. Однако, ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ ΠΈ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ стороны β€” ΠΎΠ½ΠΈ ΠΏΡ€Π΅Ρ€Ρ‹Π²Π°ΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΏΠΎΡ‚ΠΎΠΊ ΠΈ Π½Π΅ Π΄Π°ΡŽΡ‚ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ со страницСй, скрывая Π·Π° собой ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° β€” это Π½Π΅ всСгда Π»ΡƒΡ‡ΡˆΠ΅Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Π²Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ. Когда Π²Ρ‹ Ρ€Π΅ΡˆΠ°Π΅Ρ‚Π΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ модальноС ΠΎΠΊΠ½ΠΎ ΠΈΠ»ΠΈ Π½Π΅Ρ‚, ΠΏΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ:

  • Когда ΠΌΡ‹ Π±ΡƒΠ΄Π΅Ρ‚ Π΅Π³ΠΎ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ?
  • Как ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Π΅Π³ΠΎ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ?
  • Как ΠΎΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ?
  • ΠšΠ°ΠΊΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈ ΡΠΎΠ±ΠΈΡ€Π°Ρ‚ΡŒ?

ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ НаСмы БаскандСри

ΠŸΠΎΡ‡Π΅ΠΌΡƒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π°-Π·Π»ΠΎ? β€” CodeRoad



Π­Ρ‚ΠΎ Π½Π΅Π΄Π°Π²Π½ΠΈΠΉ вопрос ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΈ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹? . WHY ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π»ΠΈ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π° Π·Π»ΠΎΠΌ? Π­Ρ‚ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ люди всС Ρ€Π°Π²Π½ΠΎ ΠΈΡ… Π½Π΅ Ρ‡ΠΈΡ‚Π°ΡŽΡ‚? ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ часто Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΡŽΡ‚ΡΡ Ρ‚Π°ΠΊ ΠΏΠ»ΠΎΡ…ΠΎ? Π§Ρ‚ΠΎ-Ρ‚ΠΎ Π΅Ρ‰Π΅?

modal-dialog
ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ thursdaysgeek     12 дСкабря 2008 Π² 00:09

11 ΠΎΡ‚Π²Π΅Ρ‚ΠΎΠ²


  • Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π° Π² Jira?

    Π― написал сцСнарий groovy для ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ клонирования Π½Π° этапС ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° Π² Jira. Π‘ΠΊΡ€ΠΈΠΏΡ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅ ΠΈ создаСт Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡƒΡŽ ΠΊΠ»ΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ. Π― Ρ…ΠΎΡ‡Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π° экранС появилось Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ, ΠΏΠΎΠ΄Ρ‚Π²Π΅Ρ€ΠΆΠ΄Π°ΡŽΡ‰Π΅Π΅ имя ΠΊΠ»ΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ фактичСски ΠΊΠ»ΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒβ€¦

  • Как ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° MFC

    Π― внСс Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ измСнСния Π² ΠΎΠ΄Π½Ρƒ Π²Π΅Ρ€ΡΠΈΡŽ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° MFC, Π½ΠΎ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ я Ρ…ΠΎΡ‡Ρƒ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‡Π°ΡΡ‚ΡŒ этих ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π°, Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚. Π”ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ Π΅ΡΡ‚ΡŒ Π² Π½ΠΎΠ²Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ MFC. Π½ΠΎ я Π½Π΅ смог Π½Π°ΠΉΡ‚ΠΈ Π½ΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π°, связанного с Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹ΠΌΠΈ ΠΎΠΊΠ½Π°ΠΌΠΈ на…



65

Около ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ‹ ΠΎΡ‚Π²Π΅Ρ‚ΠΎΠ² Π΄ΠΎ сих ΠΏΠΎΡ€ ΠΊΠ°ΡΠ°ΡŽΡ‚ΡΡ нСдостатков Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ² подтвСрТдСния , Π° Π½Π΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ². Π₯отя ΠΏΠΎΠ΄Π°Π²Π»ΡΡŽΡ‰Π΅Π΅ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ² подтвСрТдСния ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ, это Π½Π΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ эти Π΄Π²Π° Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π° ΡΠ²Π»ΡΡŽΡ‚ΡΡ синонимами.

Π”ΠΈΠ°Π»ΠΎΠ³ mod al-это Π΄ΠΈΠ°Π»ΠΎΠ³, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ΠΈΡ‚ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ Ρ€Π΅ΠΆΠΈΠΌ ΠΈ Π½Π΅ позволяСт Π²Π°ΠΌ Π΄Π΅Π»Π°Ρ‚ΡŒ Π½ΠΈΡ‡Π΅Π³ΠΎ, Ρ‡Ρ‚ΠΎ Π½Π΅ соотвСтствуСт этому Ρ€Π΅ΠΆΠΈΠΌΡƒ, ΠΏΠΎΠΊΠ° ΠΎΠ½Π° ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Π°. Π’ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ распространСнной Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ windows.

Π­Ρ‚ΠΎ Π·Π»ΠΎ.

Рассмотрим ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ адрСсной ΠΊΠ½ΠΈΠ³ΠΈ. ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Ρƒ вас Π΅ΡΡ‚ΡŒ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ Π² адрСсной ΠΊΠ½ΠΈΠ³Π΅, ΠΈ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ сосСда ΠΏΠΎ ΠΊΠΎΠΌΠ½Π°Ρ‚Π΅.

  • Если Π΄ΠΈΠ°Π»ΠΎΠ³ Β«add personΒ» Π½Π΅ΠΌΠΎΠ΄Π°Π»Π΅Π½, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ старой записью ΠΈ Π½ΠΎΠ²ΠΎΠΉ, копируя ΠΈ вставляя свои Π΄Π°Π½Π½Ρ‹Π΅.
  • Если Π΄ΠΈΠ°Π»ΠΎΠ³ Β«add personΒ» являСтся ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ, Π²Ρ‹ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ со старой записью, ΠΏΠΎΠΊΠ° ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ Π΄ΠΈΠ°Π»ΠΎΠ³ добавлСния. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ для копирования, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Β«addΒ», Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½Ρƒ Π²Π΅Ρ‰ΡŒ. ВсС ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ΅ приходится ΠΏΠ΅Ρ€Π΅ΠΏΠ΅Ρ‡Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ.

Π’ Ρ€Π΅Π΄ΠΊΠΈΡ… случаях Π²Ρ‹ ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°Π΅Ρ‚Π΅ΡΡŒ с Ρ‡Π΅ΠΌ-Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ сдСлано Π² ΠΎΠ΄Π½ΠΎΠΌ кускС, Π½Π΅ позволяя ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ ΠΎΡ‚ΠΊΠ»ΠΎΠ½ΡΡ‚ΡŒΡΡ ΠΎΡ‚ этой Π·Π°Π΄Π°Ρ‡ΠΈ, ΠΏΠΎΠΊΠ° ΠΎΠ½Π° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½Π°. ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΈ подходят для Ρ‚Π°ΠΊΠΈΡ… случаСв. Но Ρ‚Π°ΠΊΠΈΠ΅ случаи ΠΎΡ‡Π΅Π½ΡŒ Ρ€Π΅Π΄ΠΊΠΈ! Π§Ρ‚ΠΎ Π² основном ΠΈ являСтся Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ°, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ссылаСтся этот вопрос.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Dave Sherohman     12 дСкабря 2008 Π² 01:57



36

Π›ΡŽΠ΄ΠΈ ΠΈΡ… Π½Π΅ Ρ‡ΠΈΡ‚Π°ΡŽΡ‚, ΠΈ это Ρ…ΠΎΡ€ΠΎΡˆΠΎ. Π’Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ люди Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π»ΠΈ ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡ΠΊΠΈ Π²ΠΎΠΊΡ€ΡƒΠ³ вашСго UI, Π½ΠΎ Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ Π²Π°ΠΆΠ½ΠΎΠ³ΠΎ Π²Ρ‹Π±ΠΎΡ€Π° Π²ΠΎ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌ ΠΎΠΊΠ½Π΅ просто заставит ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π½Π°ΠΆΠ°Ρ‚ΡŒ OK.

Они ΠΏΡ€Π΅Ρ€Ρ‹Π²Π°ΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, ΠΎΠ½ΠΈ ΠΌΠ΅ΡˆΠ°ΡŽΡ‚ Π΅ΠΌΡƒ Π΄Π΅Π»Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π²Π΅Ρ‰ΠΈ.

Π§Ρ‚ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΈΠ· Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π°? Π§Ρ‚ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ сообщСниС Π² модальном Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅? А Ρ‡Ρ‚ΠΎ, Ссли Ρ‚Π΅Π±Π΅ всС Ρ€Π°Π²Π½ΠΎ ?

ΠŸΡ€ΠΎΡΡ‚ΠΎ сравнитС Π΄ΠΈΠ°Π»ΠΎΠ³ поиска IE с Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠΌ поиска Firefox

Π‘Ρ€Π°Π²Π½ΠΈΡ‚Π΅ IE Β«Do you want us to remember this password for you?Β» с Firefox

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Pyrolistical     12 дСкабря 2008 Π² 00:13



23

Π›ΡƒΡ‡ΡˆΠΈΠ΅ UIs ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ. Как ΠΈ самыС Ρ…ΡƒΠ΄ΡˆΠΈΠ΅.

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ UI β€” нСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, построСн Π»ΠΈ ΠΎΠ½ ΠΈΠ· Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Ρ… ΠΎΠΊΠΎΠ½, ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов ΠΈΠ»ΠΈ тСкстовых подсказок-ΠΆΠ΅Π»Π°Ρ‚Π΅Π»Π΅Π½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π΅ΠΆΠΈΠΌ соотвСтствуСт оТиданиям ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, пСрСходящСго ΠΊ Π½Π΅ΠΌΡƒ. Когда ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° Π½Π΅ΠΎΠΆΠΈΠ΄Π°Π½Π½ΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ Π² рСТим… ΠΈΠ»ΠΈ Ρ€Π΅ΠΆΠΈΠΌ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΎΠ±Π»Π°Π΄Π°Π» ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Ρƒ Π½Π΅Π³ΠΎ Π½Π΅Ρ‚. .. Ρ‚ΠΎΠ³Π΄Π° это Π²Ρ‹Π·ΠΎΠ²Π΅Ρ‚ Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ затруднСния, Π»ΠΈΠ±ΠΎ заставив Π΅Π³ΠΎ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ ΠΊ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌΡƒ Ρ€Π΅ΠΆΠΈΠΌΡƒ, Π»ΠΈΠ±ΠΎ ΡƒΠ³Π°Π΄Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ΅ дСйствиС с ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ Π½Π΅ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°ΠΌΠΈ.

ΠΠ΅ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ UI β€” это ΠΏΠΎΠ»Π½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ инструмСнтов. НСкоторыС ΠΈΠ· Π½ΠΈΡ… ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ ΠΊ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ Ρ€Π°Π±ΠΎΡ‚Π΅, Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅-Π½Π΅Ρ‚. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΠ±Π»Π°Π΄Π°Ρ‚ΡŒ достаточными Π½Π°Π²Ρ‹ΠΊΠ°ΠΌΠΈ ΠΊΠ°ΠΊ для Π²Ρ‹Π±ΠΎΡ€Π° ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹Ρ… инструмСнтов, Ρ‚Π°ΠΊ ΠΈ для ΠΈΡ… ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ примСнСния. Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Π½Π΅ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ UI Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ, ΠΊΠ°ΠΊ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ UI (ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ инструмСнт для Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ Π·Π°Π΄Π°Ρ‡ΠΈ, ΡƒΠΆΠ΅ находящСйся Π² Ρ€ΡƒΠΊΠ°Ρ…), ΠΎΠ½ Ρ‚Π°ΠΊΠΆΠ΅ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅ Π½Π΅ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ, ΠΊΠ°ΠΊ ΠΏΠ»ΠΎΡ…ΠΎΠΉ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ UI (Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ инструмСнт для Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ Π·Π°Π΄Π°Ρ‡ΠΈ, Π²Ρ€Π΅Π·Π°ΡŽΡ‰ΠΈΠΉΡΡ Π² ваши нСостороТныС ΠΏΠ°Π»ΡŒΡ†Ρ‹).

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π³ΠΎ модального UI ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ дьявольски слоТной Π·Π°Π΄Π°Ρ‡Π΅ΠΉ для Π½Π΅Ρ‚Ρ€ΠΈΠ²ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, особСнно для ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ ΠΎΠ±Ρ‰Π΅Π³ΠΎ назначСния, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½Ρ‹Ρ… для использования ΡˆΠΈΡ€ΠΎΠΊΠΈΠΌ ΠΊΡ€ΡƒΠ³ΠΎΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ для Π΅Ρ‰Π΅ Π±ΠΎΠ»Π΅Π΅ ΡˆΠΈΡ€ΠΎΠΊΠΎΠ³ΠΎ ΠΊΡ€ΡƒΠ³Π° Ρ†Π΅Π»Π΅ΠΉ. БистСмы мСню ΠΈ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΏΡ‹Ρ‚Π°ΡŽΡ‚ΡΡ ΠΏΡ€Π΅ΠΎΠ΄ΠΎΠ»Π΅Ρ‚ΡŒ этот Ρ€Π°Π·Ρ€Ρ‹Π², позволяя ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ нСбольшиС, спСцифичныС для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Ρ… Π·Π°Π΄Π°Ρ‡ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹ Π² Π±ΠΎΠ»Π΅Π΅ ΠΊΡ€ΡƒΠΏΠ½ΠΎΠΌ, нСмодальном ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ. Однако Π½ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½ΠΈΡ… Π½Π΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ особСнно Ρ…ΠΎΡ€ΠΎΡˆΠΎ, ΠΈ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ΅ использованиС ΠΈ Ρ‡Ρ€Π΅Π·ΠΌΠ΅Ρ€Π½ΠΎΠ΅ использованиС оставили ΠΈΡ… с ΠΏΠ»ΠΎΡ…ΠΎΠΉ Ρ€Π΅ΠΏΡƒΡ‚Π°Ρ†ΠΈΠ΅ΠΉ, часто рассматриваСмой ΠΊΠ°ΠΊ ΠΏΠ΅Ρ€Π²ΠΎΠ΅ ΡƒΠ±Π΅ΠΆΠΈΡ‰Π΅ Π»Π΅Π½ΠΈΠ²ΠΎΠ³ΠΎ программиста. Π”ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π°, Π² частности, часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ скорСС ΠΊΠ°ΠΊ срСдство навязывания ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΈΠ΄Π΅ΠΈ программиста (ΠΈΠ»ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°) ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΈΠ»ΠΈ навязывания ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ слоТных ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π½Ρ‹Ρ… Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ ΠΈ слоТной ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ошибок, Π° Π½Π΅ для ΠΈΡ… ΠΎΠ΄Π½ΠΎΠΈΠΌΠ΅Π½Π½ΠΎΠΉ Ρ†Π΅Π»ΠΈ ΠΊΠΎΠΌΠΌΡƒΠ½ΠΈΠΊΠ°Ρ†ΠΈΠΈ.

Π”Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, появлСниС Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΏΡ€ΠΈΠ²Π΅Π»ΠΎ ΠΊ появлСнию Ρ‚Π°ΠΊΠΈΡ… Ρ‚Π΅Π½Π΄Π΅Π½Ρ†ΠΈΠΉ Π½Π° многочислСнных Ρ„ΠΎΡ€ΡƒΠΌΠ°Ρ…, Π³Ρ€ΡƒΠΏΠΏΠ°Ρ… новостСй ΠΈ сайтах Q&A, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ этот, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ программисты ΠΏΡ€ΠΈΠ²Ρ‹ΠΊΠ»ΠΈ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΡƒΠ»ΡŒΡ‚Ρ€Π°Π»ΠΈΠ½Π΅ΠΉΠ½ΡƒΡŽ Π»ΠΎΠ³ΠΈΠΊΡƒ, которая Π·Π°ΠΏΡ€Π°ΡˆΠΈΠ²Π°Π΅Ρ‚ Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π²Π²ΠΎΠ΄, ΠΊΠΎΠ³Π΄Π° это Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅, Π° Π½Π΅ ΠΊΠΎΠ³Π΄Π° доступно ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ. .. ΠΎΠ½ΠΈ Π²Ρ‹Π½ΡƒΠΆΠ΄Π΅Π½Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² систСмС, Π³Π΄Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ Π½Π΅Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎ, ΠΈ Π²ΠΏΠΎΠ»Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ Π»ΡŽΠ±ΡƒΡŽ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΡƒ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΡ‚ΡŒ эту свободу ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΡ‡ΡƒΠ΄Π»ΠΈΠ²ΡƒΡŽ досаду, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π½ΡƒΠΆΠ½ΠΎ Π½ΠΈΡΠΏΡ€ΠΎΠ²Π΅Ρ€Π³Π½ΡƒΡ‚ΡŒ, Π° Π½Π΅ ΠΊΠ°ΠΊ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅ Π·Π»ΠΎ. Π–Π°Π»ΠΎΠ±Π½Ρ‹Π΅ Π²ΠΎΠΏΠ»ΠΈ этих Π±Π΅Π΄Π½Ρ‹Ρ… программистов эхом разносятся ΠΏΠΎ Π‘Π΅Ρ‚ΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΈΡ… ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠΈ Π½Π°Π²ΡΠ·Π°Ρ‚ΡŒ это Π³Ρ€ΡƒΠ±ΠΎΠ΅ модальноС ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ нСмодальной систСмС Ρ€ΡƒΡˆΠ°Ρ‚ΡΡ Π²ΠΎΠΊΡ€ΡƒΠ³ Π½ΠΈΡ…. Для Ρ‚Π΅Ρ… ΠΈΠ· нас, ΠΊΡ‚ΠΎ Π΄ΠΎΠ»Π³ΠΎ страдал ΠΏΠΎΠ΄ ΠΈΡ… ТСстоким Β«dialogsΒ», это Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ прСкрасная мСлодия.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Shog9     12 дСкабря 2008 Π² 00:58




18

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π²Ρ‹ ΠΏΡ€ΠΎΡ‡Ρ‚Π΅Ρ‚Π΅ ΠΌΠΎΠΉ ΠΎΡ‚Π²Π΅Ρ‚, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ сообщСниС ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ. ВсС процСссы, подпроцСссы, Π·Π°Π΄Π°Ρ‡ΠΈ ΠΈ ΠΏΠΎΡ‚ΠΎΠΊΠΈ приостановлСны Π½Π° Π½Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ срок Π² ΠΎΠΆΠΈΠ΄Π°Π½ΠΈΠΈ вашСго ΠΎΡ‚Π²Π΅Ρ‚Π°. И, ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΠΉΠΌΠ΅Ρ‚Π΅ посланиС ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΠΎΠ³Π»Π°ΡΠΈΡ‚Π΅ΡΡŒ Π½Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡŽΡ€ΠΈΠ΄ΠΈΡ‡Π΅ΡΠΊΠΈΠ΅ Π²Π΅Ρ‰ΠΈ ΠΈ всС послСдствия всСго этого, Ρ‚ΠΎΠ³Π΄Π° ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³Π΄Π° Π²Ρ‹ смоТСтС ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Mark Stock     12 дСкабря 2008 Π² 01:46



7

Π’ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ стиля ΠΎΠ½ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ»ΠΈ ΠΌΠ΅Π½Π΅Π΅ бСсполСзны; ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π½Π΅ Ρ‡ΠΈΡ‚Π°ΡŽΡ‚ ΠΈΡ…, учатся ΠΎΡ‚ΠΌΠ°Ρ…ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ Π½ΠΈΡ…, Π° ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΠΈΡ… Ρ‡ΠΈΡ‚Π°ΡŽΡ‚, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π² Π·Π°ΠΌΠ΅ΡˆΠ°Ρ‚Π΅Π»ΡŒΡΡ‚Π²Π΅. Π― Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ Π΄ΠΈΠ°Π»ΠΎΠ³ Yes/No/Cancel-это ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π»Π΅Π½ΠΈΠ²Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ UI. Π”ΠΈΠ°Π»ΠΎΠ³ Β«buttons say what they doΒ» Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡƒΡ‡ΡˆΠ΅, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ.

Как говорится: Π’ критичСски Π²Π°ΠΆΠ½Ρ‹Ρ… для Π΄Π°Π½Π½Ρ‹Ρ… прилоТСниях intranet/Β»enterpriseΒ» ΠΎΠ½ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ»ΠΈ ΠΌΠ΅Π½Π΅Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ для подтвСрТдСния дСструктивных дСйствий ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ работоспособности нСстандартных Ρ€Π°Π±ΠΎΡ‡ΠΈΡ… процСссов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½Ρ‹, Π½ΠΎ Π½Π΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽΡ‚ΡΡ.

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ я Π½Π΅ Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Β«evilΒ», Π½ΠΎ Ρ‡Π°Ρ‰Π΅ всСго это Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ ΠΏΠ»ΠΎΡ…ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° UI.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ davetron5000     12 дСкабря 2008 Π² 00:13



5

Они Π·Π»Ρ‹, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π½Π°Ρ€ΡƒΡˆΠ°ΡŽΡ‚ Основной ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ, согласно ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ дСйствиями ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния. ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΈ (злая Ρ„ΠΎΡ€ΠΌΠ° Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Ρ… ΠΎΠΊΠΎΠ½ Π²ΠΎΠΎΠ±Ρ‰Π΅) ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΈΠΌ дСйствиСм.

НСкоторыС ΠΎΡ‚Π²Π΅Ρ‚Ρ‹, ΠΏΠΎΡ…ΠΎΠΆΠ΅, Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ это любоС Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π·Π°ΠΏΡ€Π°ΡˆΠΈΠ²Π°Π΅Ρ‚, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΠΎΠ΄Ρ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ достигнуто Π±Π΅Π· привязки всСго прилоТСния ΠΈΠ»ΠΈ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°; ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ возраТСния людСй.

Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… срСдах ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΈ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² контСкстС ΠΎΠ΄Π½ΠΎΠ³ΠΎ прилоТСния (ΠΈΠ»ΠΈ, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ, мСньшС). Π”Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠ»ΠΎΡ…ΠΈΠ΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΈ ΠΌΠ΅ΡˆΠ°ΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Π»ΠΈΠ±ΠΎ Π΅Ρ‰Π΅ Π²ΠΎ всСй ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ систСмС (скаТСм, Windows).

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ dkretz     12 дСкабря 2008 Π² 00:13



4

Одна ΠΈΠ· ΠΏΡ€ΠΈΡ‡ΠΈΠ½, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΎΠ½ΠΈ ΠΌΠ½Π΅ Π½Π΅ нравятся, Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π² ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅(ΠΎΠ΄Π½Π° большая информация Π·Π° Ρ€Π°Π·), Π° Π½Π΅ ΠΏΠ°Ρ€Π°Π»Π»Π΅Π»ΡŒΠ½ΠΎ(вся информация, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ сразу), ΠΏΠ°Ρ€Π°Π»Π»Π΅Π»ΡŒ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Ρ…ΠΎΡ‡Π΅Ρ‚ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, Π³Π΄Π΅, ΠΊΠ°ΠΊ ΠΈ Π² ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅, Π²Ρ‹ Π² Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ стСпСни заставляСтС Π΅Π³ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚.

Плюс Π΅Ρ‰Π΅ Ρ‚ΠΎΡ‚ Ρ„Π°ΠΊΡ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π½Π°Ρ€ΡƒΡˆΠ°ΡŽΡ‚ ΠΏΠΎΡ‚ΠΎΠΊ управлСния ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌΠΈ(Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΡ€Π°Π΄ΡƒΡ‚ фокус Ρƒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°, Π½Π°Π΄ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅), Ρ‡Ρ‚ΠΎ ΠΌΠ½Π΅ ΠΎΡ‡Π΅Π½ΡŒ Π½Π΅ нравится. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ этого ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ просто Π½Π°ΠΆΠΌΠ΅Ρ‚ OK, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π΄Π΅Π»Π°Π΅Ρ‚, ΠΈ ΠΏΡ€ΠΎΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π² Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅.

Π˜ΠΌΠ΅ΠΉΡ‚Π΅ Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ Π² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях ΠΎΠ½ΠΈ Π²Π°ΠΌ всС Π΅Ρ‰Π΅ Π½ΡƒΠΆΠ½Ρ‹.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Nathan W     12 дСкабря 2008 Π² 00:13



3

Π’ ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π’ΠΈΠΊΠΈΠΏΠ΅Π΄ΠΈΠΈ Π΅ΡΡ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π΅ суммированиС ΠΆΠ°Π»ΠΎΠ±.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Alan Storm     12 дСкабря 2008 Π² 00:14



3

Π― Π½Π΅ помню, Π³Π΄Π΅ я Π²ΠΏΠ΅Ρ€Π²Ρ‹Π΅ ΡƒΠ²ΠΈΠ΄Π΅Π» это, Π½ΠΎ Π»ΡƒΡ‡ΡˆΠΈΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½ΠΎΠΌΡƒ Π΄ΠΈΠ°Π»ΠΎΠ³Ρƒ часто Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π»Π΅Π³ΠΊΠΎ Π½Π°ΠΉΡ‚ΠΈ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Β«undoΒ». Windows Explorer Π½Π° самом Π΄Π΅Π»Π΅ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΈ Ρ‚ΠΎ, ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ΅, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ удаляСтС Ρ„Π°ΠΉΠ». Он Π·Π°ΠΏΡ€Π°ΡˆΠΈΠ²Π°Π΅Ρ‚ ΠΏΠΎΠ΄Ρ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠ΅ (ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ°Π»ΠΎΠ³), Π° Π·Π°Ρ‚Π΅ΠΌ, сразу ΠΆΠ΅ послС удалСния Ρ„Π°ΠΉΠ»Π°, Π² мСню рСдактирования появляСтся опция Β«Undo DeleteΒ». просто простой способ доступа ΠΊ ΠΊΠΎΡ€Π·ΠΈΠ½Π΅, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ,Π½ΠΎ Π² этом случаС Microsoft Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΌΠΎΠ³Π»Π° Π±Ρ‹ просто ΠΏΠΎΠΊΠΎΠ½Ρ‡ΠΈΡ‚ΡŒ с Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠΌ.

Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ часто ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ Π±Π΅Π· Π΄ΠΈΠ°Π»ΠΎΠ³Π°, Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄ΡƒΠΌΠ°Π² ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°, Π½ΠΎ это слишком простой Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ для Π»Π΅Π½ΠΈΠ²ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π±ΠΎΠ»Π΅Π΅ Ρ‰Π΅Π΄Ρ€ΠΎ, ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°.

Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΠΈΠ½ΠΎΠ³Π΄Π° Π²Π°ΠΌ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΡƒΠΆΠ΅Π½ Π΄ΠΈΠ°Π»ΠΎΠ³. ΠŸΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎΠ±ΠΎ всСх ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°Ρ… Ρ‚ΠΈΠΏΠΈΡ‡Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ. Какой ΠΏΡ€ΠΈΠ½Ρ‚Π΅Ρ€? ВсС страницы ΠΈΠ»ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ нСсколько? Бколько ΠΊΠΎΠΏΠΈΠΉ? Π― Π½Π΅ знаю, ΠΊΠ°ΠΊ Π±Ρ‹ Π²Ρ‹ это сдСлали Π±Π΅Π· Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ окна…

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ JeffK     12 дСкабря 2008 Π² 00:54



3

Нобой Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ ΠΈΡ…, ΠΈ ΠΎΠ½ΠΈ ΠΏΡ€Π΅Ρ€Ρ‹Π²Π°ΡŽΡ‚ ΠΏΠΎΡ‚ΠΎΠΊ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹. Часто ΠΏΡ€ΠΈ использовании Π² качСствС увСдомлСния ΠΎΠ± ΠΎΡˆΠΈΠ±ΠΊΠ°Ρ… ΠΎΠ½ΠΈ ΡΠ²Π»ΡΡŽΡ‚ΡΡ прСдвСстником сбоя ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹. К Ρ‚ΠΎΠΌΡƒ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ происходит, сообщСниС исчСзаСт, ΠΈ Π΅ΠΌΡƒ остаСтся Π²ΡΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ сообщСниС ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π»ΡƒΡ‡ΡˆΠ΅.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ user45568     12 дСкабря 2008 Π² 01:30



2

Π›ΠΈΡ‡Π½ΠΎ я Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ это ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ зависит ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ это дСлаСтся.

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ 10 Ρ„Π°ΠΉΠ»ΠΎΠ², Π³Π΄Π΅ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ„Π°ΠΉΠ» сущСствуСт Π² Ρ†Π΅Π»Π΅Π²ΠΎΠΌ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π΅, сдСлайтС это с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Windows Explorer.

ЯвляСтся Π»ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ°Π»ΠΎΠ³ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π° Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ ΠΎΡ‚Π²Π΅Ρ‚ΠΎΠΌ Π² Ρ‚Π°ΠΊΠΎΠΉ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΈ. Π― знаю, Ρ‡Ρ‚ΠΎ Ρƒ вас Π΅ΡΡ‚ΡŒ Β«Π΄Π° всСм», Π½ΠΎ вся систСма ΠΏΠ΅Ρ‚Π΅Π»ΡŒ Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Π»Π° Π±Ρ‹Ρ‚ΡŒ построСна ΠΏΠΎ-Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ. Он Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Π» ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ всС ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Ρ„Π°ΠΉΠ»Ρ‹ Π² ΠΎΠ΄ΠΈΠ½ большой список ΠΈ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π· ΡΠΏΡ€ΠΎΡΠΈΡ‚ΡŒ: Β«Π§Ρ‚ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с этими Ρ„Π°ΠΉΠ»Π°ΠΌΠΈΒ», Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ΡŒ ΠΌΠ½Π΅ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π° Π² спискС, Π§Ρ‚ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π½Π°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ OK ΠΈ Π²ΠΎΠ·ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΡŽ.

И ΠΎΡ‡Π΅Π½ΡŒ часто Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π° просто ΠΏΡ€Π΅Ρ€Ρ‹Π²Π°ΡŽΡ‚ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ процСсс.

И Π΄Π°, люди Π½Π΅ Ρ‡ΠΈΡ‚Π°ΡŽΡ‚ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π°. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π·ΠΎΠ»ΠΎΡ‚ΠΎΠΉ совСт, Ссли Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ, β€” это ΠΏΠ΅Ρ€Π΅Ρ„Ρ€Π°Π·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ.

ВмСсто Β«Π’Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ эту строку Π² Π±Π°Π·Π΅ Π΄Π°Π½Π½Ρ‹Ρ…?Β» ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΡΡ„ΠΎΡ€ΠΌΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π΅ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΡΠΏΡ€Π°ΡˆΠΈΠ²Π°Π»ΠΈ (Π½ΠΎ это Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ сформулировано) Β«Do you want to not delete this row in the database?Β» Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ссли ΠΎΠ½ΠΈ просто Π½Π°ΠΆΠΌΡƒΡ‚ Β«Π”Π°Β», Ρ‡Ρ‚ΠΎ являСтся Ρ‚ΠΈΠΏΠΈΡ‡Π½Ρ‹ΠΌ ΠΎΡ‚Π²Π΅Ρ‚ΠΎΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ просто Ρ…ΠΎΡ‡Π΅Ρ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ, ΠΎΠ½ΠΈ Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ ΡΠ΄Π΅Π»Π°ΡŽΡ‚.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Lasse V. Karlsen     12 дСкабря 2008 Π² 00:14


ΠŸΠΎΡ…ΠΎΠΆΠΈΠ΅ вопросы:


jQuery Mobile Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π° оповСщСния/подтвСрТдСния

Π•ΡΡ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ Π‘Π΅Π½Ρ‡Π°-ΠΊΠ°ΠΊ мобильноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ jQuery для увСдомлСния ΠΈ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π° подтвСрТдСния?


MVP: Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π°, Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°ΡŽΡ‰ΠΈΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈ тСстируСмый ΠΊΠΎΠ΄

Π’ ΠΌΠΎΠ΅ΠΌ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π° основС шаблона MVP (пассивноС прСдставлСниС) (. NET) я Ρ€Π°Π·Π΄Π΅Π»ΠΈΠ» ΠΎΠΊΠ½Π° сообщСний Π½Π° прСдставлСниС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈ тСстировании ΠΌΠΎΠ΅Π³ΠΎ Π΄ΠΎΠΊΠ»Π°Π΄Ρ‡ΠΈΠΊΠ° ΠΈ ΠΌΠΎΠ΄Π΅Π»ΠΈ ΠΌΠΎΠΉ тСстовый ΠΊΠΎΠ΄ Π½Π΅ Π±Ρ‹Π» затронут…


Как ΠΏΠΎΠ΄Π°Π²ΠΈΡ‚ΡŒ всС Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠΉ .NET?

По ΠΌΠΎΠ΅ΠΌΡƒ ΠΎΠΏΡ‹Ρ‚Ρƒ, unhandled exception Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ .NET ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π°, ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΈ Ρ‚. Π΄. Π•ΡΡ‚ΡŒ Π»ΠΈ способ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΠ΄Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π°? МоТно ли…


Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π° Π² Jira?

Π― написал сцСнарий groovy для ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ клонирования Π½Π° этапС ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° Π² Jira. Π‘ΠΊΡ€ΠΈΠΏΡ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅ ΠΈ создаСт Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡƒΡŽ ΠΊΠ»ΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ. Π― Ρ…ΠΎΡ‡Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π° экранС ΠΏΠΎΡΠ²ΠΈΠ»ΠΎΡΡŒβ€¦


Как ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° MFC

Π― внСс Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ измСнСния Π² ΠΎΠ΄Π½Ρƒ Π²Π΅Ρ€ΡΠΈΡŽ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° MFC, Π½ΠΎ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ я Ρ…ΠΎΡ‡Ρƒ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‡Π°ΡΡ‚ΡŒ этих ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π°, Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚. Π”ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒβ€¦


Доступны Π»ΠΈ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°?

Π‘Ρ‡ΠΈΡ‚Π°ΡŽΡ‚ΡΡ Π»ΠΈ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° доступными ΠΏΠΎ стандартам WCAG A/AA? Π”ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π°, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ я ΡΡΡ‹Π»Π°ΡŽΡΡŒ, ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ€ΠΎΠ΄Π½Ρ‹ΠΌΠΈ для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π² Chrome:


ΠŸΠΎΡ‡Π΅ΠΌΡƒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΈ Π² Prism 6 Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ ΡΠΈΠ»ΡŒΠ½Ρ‹ΠΉ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π΅ΠΆΠΈΠΌ ΠΈ Π²Π΅Π΄ΡƒΡ‚ сСбя ΠΊΠ°ΠΊ Π½Π΅ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅?

Иногда ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΈ Π² Prism 6 для WPF Π²Π΅Π΄ΡƒΡ‚ сСбя ΠΊΠ°ΠΊ Π½Π΅ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅. НапримСр, Ссли ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ°Π»ΠΎΠ³ находится Π½Π°Π΄ Π΅Π³ΠΎ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ ΠΎΠΊΠ½ΠΎΠΌ, ΠΈ я наТимаю Π½Π° ΠΏΠΎΠ²Π΅Ρ€Ρ…Π½ΠΎΡΡ‚ΡŒ родитСля (рядом с границСй…


MFC Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π° Π²Ρ‹ΡˆΠ΅ 1 уровня

Π― ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ Π²Π»ΠΎΠΆΠΈΡ‚ΡŒ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π°, ΠΈ это Π»Π΅Π³ΠΊΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с ΠΎΠ΄Π½ΠΈΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅ΠΌ влоТСнности, Π½ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ breaks-самый Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ Π΄ΠΈΠ°Π»ΠΎΠ³ Π½Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ событий. [IDD_NESTEDDLG_DIALOG] | +β€” [IDD_CHILD1]…


c# WinForms-ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° Π² Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π°

МнС просто Π±Ρ‹Π»ΠΎ интСрСсно, Π΅ΡΡ‚ΡŒ Π»ΠΈ Π±ΠΎΠ»Π΅Π΅ простой способ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ стиля ΠΈΠ· основной Ρ„ΠΎΡ€ΠΌΡ‹ Π² Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π°. МоС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ настраиваСмыС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ свойства стиля для всСх…


Как Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΈ ALL Π² Flutter?

Как Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ всС ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΈ? Π£ мСня Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ² (Π½ΠΈΠΆΠ½ΠΈΠ΅ листы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ). МногиС ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ. Команда:…

Π’Ρ‹ Π½Π΅ Π·Π½Π°Π΅Ρ‚Π΅ ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π°

Π£Π²Π΅Ρ€Π΅Π½, ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Ρ…ΠΎΡ‚ΡŒ Ρ€Π°Π· создавали Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ модальноС ΠΎΠΊΠ½ΠΎ. Но Π·Π°Π΄ΡƒΠΌΡ‹Π²Π°Π»ΠΈΡΡŒ Π»ΠΈ Π²Ρ‹ ΠΎΠ± ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ этого ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°? Как ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ?

Π’ этом ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π΅ я постарался ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ максимально ΠΏΠΎΠ»Π½Ρ‹ΠΉ свод ΠΏΡ€Π°Π²ΠΈΠ», Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΉ ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ.

Π― ΠΏΠΎΠΊΠ°ΠΆΡƒ, ΠΊΠ°ΠΊ просто ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ слоТныС, ΡƒΠ΄ΠΎΠ±Π½Ρ‹Π΅, ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΈ доступныС ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° нСзависимо ΠΎΡ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹, устройства ΠΈΠ»ΠΈ способа взаимодСйствия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

Π­Ρ‚ΠΎΡ‚ список сформирован Π½Π° основС спСцификаций WAI-ARIA, HTML Living Standard ΠΈ ΠΌΠΎΠ΅Π³ΠΎ Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ ΠΎΠΏΡ‹Ρ‚Π°. И хотя я Π±ΡƒΠ΄Ρƒ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ Π²Π΅Π±, Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΏΡ€Π°Π²ΠΈΠ» ΠΈ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΡ‹ для ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ Π³Π΄Π΅ ΡƒΠ³ΠΎΠ΄Π½ΠΎ.


ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ модального ΠΎΠΊΠ½Π°

МодальноС ΠΎΠΊΠ½ΠΎ β€” это ΠΎΠΊΠ½ΠΎ Π½Π°Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ΅ Π»ΠΈΠ±ΠΎ Π½Π° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚, Π»ΠΈΠ±ΠΎ Π½Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΎΠΊΠ½Π°. ΠŸΡ€ΠΈ этом, любой ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΏΠΎΠ΄ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΎΠΊΠ½ΠΎΠΌ являСтся нСдоступным для взаимодСйствия.


Π’Π΅Π³ΠΈ ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹

Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ элСмСнтом для открытия Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Π° Π²Ρ‹ΡΡ‚ΡƒΠΏΠ°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠ°. НС <div>, Π½Π΅ <span> Π½Π΅ <a>, Π½Π΅ любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ‚Π΅Π³. Π˜ΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ <button>. И касаСтся Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Ρ… ΠΎΠΊΠΎΠ½, <button> β€” самый Π½Π°Π΄Π΅ΠΆΠ½Ρ‹ΠΉ ΠΈ доступный способ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ элСмСнты Π½Π° страницС.

ΠŸΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠ°Ρ рСализация ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π°Ρ Π΄ΠΈΠ°Π»ΠΎΠ³ ΠΏΠΎ Π΅Π³ΠΎ id:

<button data-modal="dialogId">
    ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ
</button>

<dialog>

Для Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ², ΡƒΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΡ… ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ элСмСнтов сущСствуСт Ρ‚Π΅Π³ <dialog>. Π•Π³ΠΎ Π²Ρ‹ ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. К ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠΌΡƒ соТалСнию, Π΅Π³ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π½Π΅ самая Π»ΡƒΡ‡ΡˆΠ°Ρ:


  • Chromium β€” полная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°.
  • Firefox β€” ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π·Π° Ρ„Π»Π°Π³ΠΎΠΌ.
  • Safari Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ вовсС.

Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ для этих Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ polyfill:

if (!document.createElement('dialog').showModal) {
  // Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π°Ρ‚ΠΈΠ²Π½ΠΎ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ элСмСнт dialog

  import('/dist/dialog-polyfill.js') // ΠŸΠΎΠ΄Π³Ρ€ΡƒΠΆΠ°Π΅ΠΌ polyfill
    .then(dialogPolyfill =>
      document. querySelectorAll('dialog')
        .forEach(dialogPolyfill.registerDialog) // ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ Π΅Π³ΠΎ для всСх элСмСнтов Π½Π° страницС
    )
}

Π’Ρ‹, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠΉ элСмСнт для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚Π°ΠΊ:

<section role="dialog" aria-modal="true">
...
</section>

Π½ΠΎ Ρ‚ΠΎΠ³Π΄Π° Π²Π°ΠΌ придётся ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ всё ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ описанноС Π΄Π°Π»Π΅Π΅. Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ с <dialog> Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΠ΅Ρ‚ ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ.


Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΈ содСрТаниС

Π’ΡΠΊΠΎΠ»ΡŒΠ·ΡŒ ΠΊΠΎΡΠ½ΡƒΡΡŒ внСшнСго Π²ΠΈΠ΄Π°.

На Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… экранах Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ 100% Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°. Если ваш Π΄ΠΈΠ°Π»ΠΎΠ³ Π±ΡƒΠ΄Π΅Ρ‚ большим:


  1. Π•Π³ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π»Π΅Π³Ρ‡Π΅ Β«Π½Π°Ρ‰ΡƒΠΏΠ°Ρ‚ΡŒΒ». Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ со страницСй ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ: ΠΎΠ½ Π²ΠΎΠ΄ΠΈΡ‚ ΠΏΠ°Π»ΡŒΡ†Π΅ΠΌ ΠΏΠΎ дисплСю, Π° ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° чтСния с экрана ΠΎΠ·Π²ΡƒΡ‡ΠΈΠ²Π°Π΅Ρ‚ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π² Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ находится ΠΏΠΎΠ΄ ΠΏΠ°Π»ΡŒΡ†Π΅ΠΌ.
  2. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΠ·Π²ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ элСмСнты Β«ΠΏΠΎΠ΄ Π½ΠΈΠΌΒ». Π˜Π½Π°Ρ‡Π΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, VoiceOver Π½Π° iPad ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠ·Π²ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ страницы ΠΏΠΎΠ΄ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΎΠΊΠ½ΠΎΠΌ Π΄Π°ΠΆΠ΅ «сквозь» ΠΎΠ²Π΅Ρ€Π»Π΅ΠΉ Π±Π»ΠΎΠΊΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ доступ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŽ.
  3. Π’Ρ‹ скроСтС ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ Ρ„ΠΎΠ½Π° Π½Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… устройствах ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π² Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅.
  4. Π£Π΄ΠΎΠ±Π½Π΅Π΅ для ΠΎΠ΄Π½ΠΎΠΉ Ρ€ΡƒΠΊΠΈ. Если ΠΎΠΊΠ½ΠΎ растянуто Π½Π° всю высоту – Ρ‚ΠΎ Ρƒ вас Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΈΠΆΠ°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ управлСния ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΉ части дисплСя. Π’ΡƒΠ΄Π° Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‰Π΅ Π΄ΠΎΡ‚ΡΠ½ΡƒΡ‚ΡŒΡΡ ΠΎΠ΄Π½ΠΎΠΉ Ρ€ΡƒΠΊΠΎΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ соврСмСнных смартфонов.
  5. Π‘ΠΎΠ»ΡŒΡˆΠ΅ мСста для ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π½Π° устройствах с малСньким экраном, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ iPhone SE.

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ обязатСлСн

Π£ модального ΠΎΠΊΠ½Π°, ΠΊΠ°ΠΊ Ρƒ любой ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΉ страницы, Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ свой Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ. ΠšΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΉ, Ρ‚ΠΎΡ‡Π½ΠΎ ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Π΅Π³ΠΎ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. НаличиС Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ восприятиС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ.

ΠΠ°ΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ рСкомСндуСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Ρ‚Π΅Π³ <h2>-<h6>.

Но просто Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π² Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ нСдостаточно. Π˜Ρ… Π½ΡƒΠΆΠ½ΠΎ Π΅Ρ‰Ρ‘ ΠΈ логичСски Β«ΡΠ²ΡΠ·Π°Ρ‚ΡŒΒ». Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ это ΠΌΠΎΠΆΠ½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° aria-labelledby ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

<dialog aria-labeledby="subscribe-header">
  <h3>ΠŸΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ подписки</h3>
</dialog>

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΏΡ€ΠΈ ΠΏΠΎΠΏΠ°Π΄Π°Π½ΠΈΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π² Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ, Π² случаС с экранным Π΄ΠΈΠΊΡ‚ΠΎΡ€ΠΎΠΌ, Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Ρ‡ΠΈΡ‚Π°Π½ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ„Π°ΠΊΡ‚ наличия Π΄ΠΈΠ°Π»ΠΎΠ³Π°, Π½ΠΎ ΠΈ Π΅Π³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ.


БтатичСский ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ связан с ΠΎΠΊΠ½ΠΎΠΌ

Если Π² вашСм Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅ Π΅ΡΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Ρ‚ΠΎ Π½Π΅ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ содСрТаниС, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π°Π±Π·Π°Ρ† тСкста, Π΅Π³ΠΎ стоит ΡΠ²ΡΠ·Π°Ρ‚ΡŒ с Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠΌ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡƒ. Π˜Π½Π°Ρ‡Π΅, Π² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ чтСния с экрана Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΠ·Π²ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.

ДСлаСтся это Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ aria-describedby:

<dialog aria-labeledby="subscribe-header" aria-describedby="subscribe-content">
    <h3>ΠŸΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ подписки</h3>
    <p>
        Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° Π½Π°ΡˆΡƒ Π΅ΠΆΠ΅Π½Π΅Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ рассылку.
        Π’ Π½Π΅ΠΉ прСдставлСны Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π»ΡƒΡ‡ΡˆΠΈΠ΅ ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ. 
    </p>
</dialog>

Если Π² вашСм Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅ ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Ρ‚ΠΎΠ³Π΄Π° стоит ΠΎΠ±Π΅Ρ€Π½ΡƒΡ‚ΡŒ Π΅Π³ΠΎ Π² ΠΎΠ΄ΠΈΠ½ <div> ΠΈ ΡΠ²ΡΠ·Π°Ρ‚ΡŒ элСмСнт Π΄ΠΈΠ°Π»ΠΎΠ³Π° ΡƒΠΆΠ΅ с Π½ΠΈΠΌ:

<dialog aria-labeledby="subscribe-header" aria-describedby="subscribe-content">
    <h3>Условия подписки</h3>

    <div>
        <p>НиТС прСдставлСны условия нашСй подписки.</p>
        <p>...</p>
        <ul>...</ul>
        <p>...</p>
        ...Много ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°
    </div>
</dialog>

Π’Π°ΠΆΠ½ΠΎ! Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ Π»ΡŽΠ±Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π΅ относящиСся ΠΊ содСрТимому, Π° слуТащиС для управлСния Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹ΠΌ ΠΎΠΊΠ½ΠΎΠΌ, Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ Π² элСмСнт Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ aria-describedby. Они Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ вынСсСны ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ:

<dialog aria-labeledby="subscribe-header" aria-describedby="subscribe-content">
    <h3>Условия подписки</h3>

    <div>
        <p>НиТС прСдставлСны условия нашСй подписки. </p>
        <p>...</p>
        <ul>...</ul>
        <p>...</p>
        ...Много ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°
    </div>

    <div>
        <button>ΠŸΡ€ΠΈΠ½ΡΡ‚ΡŒ</button>
        <button>ΠžΡ‚ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΈ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ</button>
    </div>
</dialog>

Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ элСмСнты ΡΠ²ΡΠ·Ρ‹Π²Π°Ρ‚ΡŒ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ

Π•ΡΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ сцСнарий, ΠΊΠΎΠ³Π΄Π° содСрТимоС вашСго ΠΎΠΊΠ½Π° состоит ΠΈΠ· Ρ„ΠΎΡ€ΠΌΡ‹ Π±Π΅Π· ΠΏΡ€Π΅Π΄ΡˆΠ΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ Π΅ΠΉ тСкста. Π’ Ρ‚Π°ΠΊΠΎΠΌ случаС Π½Π΅Ρ‚ нСобходимости ΡΠ²ΡΠ·Ρ‹Π²Π°Ρ‚ΡŒ Ρ„ΠΎΡ€ΠΌΡƒ с ΠΎΠΊΠ½ΠΎΠΌ:

<dialog aria-labeledby="subscribe-header">
    <h3>Π”Π°Π½Π½Ρ‹Π΅ для подписки</h3>

    <form>
        <label>
            Π’Π²Π΅Π΄ΠΈΡ‚Π΅ ваш email
            <input type="email">
        </label>
    </form>

    <div>
        <button>ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ</button>
        <button>ΠžΡ‚ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΈ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ</button>
    </div>
</dialog>

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ Ρ„ΠΎΡ€ΠΌΡ‹ ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ. И ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΠ·Π²ΡƒΡ‡Π΅Π½Ρ‹ скринридСром, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Ρ‡Π½Ρ‘Ρ‚ с Π½ΠΈΠΌΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ.

Если ΡΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ статичСский тСкст ΠΈ Ρ„ΠΎΡ€ΠΌΡƒ:

<dialog aria-labeledby="subscribe-header" aria-describedby="subscribe-content">
    <h3>ΠŸΠΎΠ΄ΠΏΠΈΡˆΠΈΡ‚Π΅ΡΡŒ Π½Π° рассылку</h3>

    <p>
        Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° Π½Π°ΡˆΡƒ Π΅ΠΆΠ΅Π½Π΅Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ рассылку.
    </p>

    <form>
        <label>
            Π’Π²Π΅Π΄ΠΈΡ‚Π΅ ваш email
            <input type="email">
        </label>
    </form>

    <div>
        <button>ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ</button>
        <button>ΠžΡ‚ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΈ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ</button>
    </div>
</dialog>

Бпособы Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΎΠΊΠ½ΠΎ

Π’Π½ΡƒΡ‚Ρ€ΠΈ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° обязана Π±Ρ‹Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Π³ΠΎ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ. НС <div>, Π½Π΅ <span> Π½Π΅ <a>, Π½Π΅ любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ‚Π΅Π³. Π˜ΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ <button>. Π­Ρ‚ΠΎ самый Π½Π°Π΄Π΅ΠΆΠ½Ρ‹ΠΉ способ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ любой ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ смоТСт Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ. Π’Ρ‹ ΠΆΠ΅ Π½Π΅ Π»ΡŽΠ±ΠΈΡ‚Π΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ?

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, Π² зависимости ΠΎΡ‚ вашСй Π»ΠΎΠ³ΠΈΠΊΠΈ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ Π΄ΠΈΠ°Π»ΠΎΠ³ ΠΊΠ»ΠΈΠΊΠ½ΡƒΠ² Π·Π° Π΅Π³ΠΎ ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ ΠΈΠ»ΠΈ Π½Π°ΠΆΠ°Π² Escape (встроСно Π² <dialog> ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ).

Но:


  1. НС рассчитывайтС, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ всСгда ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° ΠΎΠ²Π΅Ρ€Π»Π΅ΠΉ ΠΈ Ρ‚Π°ΠΊ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ Π΄ΠΈΠ°Π»ΠΎΠ³.
    1. Как я писал Ρ€Π°Π½Π΅Π΅, Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… случаях Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ всю ΠΈΠ»ΠΈ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ экрана. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΏΠΎΠΏΠ°ΡΡ‚ΡŒ Π² Π½Π΅Π³ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ слоТно ΠΈΠ»ΠΈ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ.
    2. Π’Π°ΠΊΠΎΠΉ ΠΎΠ²Π΅Ρ€Π»Π΅ΠΉ сСмантичСски Π½Π΅ считаСтся ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ элСмСнтом. Он Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π² фокусС ΠΈ Π½Π° Π½Π΅Π³ΠΎ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Β«Π½Π°ΠΆΠ°Ρ‚ΡŒΒ» клавишами.
  2. НС рассчитывайтС, Ρ‡Ρ‚ΠΎ Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΏΠΎΠ΄ Ρ€ΡƒΠΊΠΎΠΉ Π΅ΡΡ‚ΡŒ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΆΠ°Ρ‚ΡŒ Escape.
  3. БущСствуСт мноТСство устройств, ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… инструмСнтов, способных Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ Π²Π΅Π±-сайты ΠΈ Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с Π½ΠΈΠΌΠΈ, Π½ΠΎ Π½Π΅ Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Π’ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… случаях СдинствСнным Ρ€Π°Π±ΠΎΡ‡ΠΈΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ остаётся ΠΊΠ½ΠΎΠΏΠΊΠ° Π²Π½ΡƒΡ‚Ρ€ΠΈ.

ΠŸΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠ°Ρ рСализация ΠΊΠ½ΠΎΠΏΠΊΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ Π΄ΠΈΠ°Π»ΠΎΠ³:

<button>
Π—Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ
</button>

А Ссли Π²Ρ‹ Π΄Π΅Π»Π°Π΅Ρ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ с ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ, Ρ‚ΠΎ Π½Π΅ Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΎ подпись, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ Ρ‘Ρ‘ Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅:

<button aria-label="Π—Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ">
 Γ—
</button>

ПовСдСниС фокуса


ΠŸΡ€ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠΈ Π΄ΠΈΠ°Π»ΠΎΠ³Π°

Π’ΠΎ врСмя открытия Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° фокус Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Ρ‘Π½ Π½Π° элСмСнт Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅Π³ΠΎ. На ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠΌΠ΅Π½Π½ΠΎ β€” зависит ΠΎΡ‚ содСрТания.

Π’ ΠΎΠ±Ρ‰Π΅ΠΌ случаС фокус пСрСмСщаСтся Π½Π° ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ элСмСнт. ИмСнно Ρ‚Π°ΠΊ Π²Π΅Π΄Π΅Ρ‚ сСбя Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ <dialog> Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Но нСльзя Π΄Π΅Π»Π°Ρ‚ΡŒ сам элСмСнт ΠΎΠΊΠ½Π° фокусируСмым ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ фокус Π½Π° Π½Π΅Π³ΠΎ.

НапримСр, для Π΄ΠΈΠ°Π»ΠΎΠ³Π° с Ρ„ΠΎΡ€ΠΌΠΎΠΉ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ элСмСнт это ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ <input>. Если вашС Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ носит чисто ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ Ρ…Π°Ρ€Π°ΠΊΡ‚Π΅Ρ€, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΡƒΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΎΠ± ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎΠΉ подпискС, Ρ‚ΠΎΠ³Π΄Π° ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ ΠΈ СдинствСнным элСмСнтом Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΠ° Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π°Ρ Π΄ΠΈΠ°Π»ΠΎΠ³.

Но Π΅ΡΡ‚ΡŒ ΠΈ нСсколько ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠΉ:


  1. Запрос подтвСрТдСния Ρ‡Π΅Π³ΠΎ-Π»ΠΈΠ±ΠΎ. Если ваш Π΄ΠΈΠ°Π»ΠΎΠ³ Π·Π°ΠΏΡ€Π°ΡˆΠΈΠ²Π°Π΅Ρ‚ Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ подтвСрТдСния ΠΏΠ΅Ρ€Π΅Π΄ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΊΠ°ΠΊΠΈΡ…-Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ€Π°Ρ‚ΠΈΠΌΡ‹Ρ… дСйствий (ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠ΅ Ρ‡Π΅Π³ΠΎ-Ρ‚ΠΎ ΠΈΠ»ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ финансовых ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΉ), Ρ‚ΠΎΠ³Π΄Π° фокус автоматичСски Π΄ΠΎΠ»ΠΆΠ΅Π½ ставится Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«ΠΎΡ‚ΠΌΠ΅Π½Ρ‹Β» этих дСйствий, нСзависимо ΠΎΡ‚ Π΅Ρ‘ располоТСния.
  2. Π‘ΠΈΡ‚ΡƒΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΠ³Π΄Π° Π² Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅ ΠΌΠ½ΠΎΠ³ΠΎ статичСского ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΈ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ элСмСнт Π½Π΅ помСщаСтся Π² Π²ΠΈΠ΄ΠΈΠΌΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ. ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Ρ‚ΡƒΡ‚ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π² Ρ‚Π°ΠΊΠΎΠΌ случаС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ автоматичСски проскролит Π²Π½ΠΈΠ· ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π² фокусС. Π­Ρ‚ΠΎ Π²Ρ‹Π½ΡƒΠ΄ΠΈΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΡΠΊΡ€ΠΎΠ»ΠΈΡ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ Π²Π²Π΅Ρ€Ρ…, Π° ΠΏΠΎΡ‚ΠΎΠΌ снова Π²Π½ΠΈΠ·. Для Ρ‚Π°ΠΊΠΈΡ… случаСв Π΅ΡΡ‚ΡŒ Π΄Π²Π° ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°:
    1. ΠŸΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ элСмСнты Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ… Π±Ρ‹Π» Π² Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ части экрана. НапримСр, Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ Π² Π²ΠΈΠ΄Π΅ крСстика ΠΈ Π·Π°ΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π°.
    2. Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈΠ»ΠΈ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Π°Π±Π·Π°Ρ† тСкста Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ фокусируСмым ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ tabindex="-1" ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ фокус Π½Π° Π½Π΅Π³ΠΎ. Но ΠΏΡ€ΠΈ этом ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π΅ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ чтСния с экрана ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠ·Π²ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Π½Π½Ρ‹ΠΉ тСкст Π΄Π²Π°ΠΆΠ΄Ρ‹: сначала ΠΊΠ°ΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ описаниС ΠΎΠΊΠ½Π°, Π° ΠΏΠΎΡ‚ΠΎΠΌ ΠΊΠ°ΠΊ содСрТаниС Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ элСмСнта.

Π£ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΊΡƒΠ΄Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΠΎΠΏΠ°Π΄Ρ‘Ρ‚ фокус ΠΏΡ€ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠΈ модального ΠΎΠΊΠ½Π° ΠΌΠΎΠΆΠ½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° autofocus:

<dialog aria-labeledby="subscribe-header">
    <h3>НСобратимыС дСйствия</h3>

    <form>
        <label>
            Π’Π²Π΅Π΄ΠΈΡ‚Π΅ ΠΏΠ°Ρ€ΠΎΠ»ΡŒ для подтвСрТдСния
            <input type="password">
        </label>
    </form>

    <div>
        <button>ΠŸΠΎΠ΄Ρ‚Π²Π΅Ρ€ΠΆΠ΄Π°ΡŽ</button>
        <button autofocus>ΠžΡ‚ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΈ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ</button> <!-- Π‘ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π±Ρ€Π°Π½Π° эта ΠΊΠ½ΠΎΠΏΠΊΠ° -->
    </div>
</dialog>

Π’Π½ΡƒΡ‚Ρ€ΠΈ Π΄ΠΈΠ°Π»ΠΎΠ³Π°

ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ модального ΠΎΠΊΠ½Π° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ собой вСсь Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π½Π΅ давая Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ с Π½ΠΈΠΌ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ.

Π§Ρ‚ΠΎΠ±Ρ‹ Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ накрываСтся ΠΏΠΎΠ»ΡƒΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌ Π±Π»ΠΎΠΊΠΎΠΌ.

Но этого нСдостаточно, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ остаётся Π΅Ρ‰Ρ‘ ΠΈ навигация клавишами Tab / Shift + Tab. Π’Π°ΠΊΠΆΠ΅ это ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ клавиши громкости Π½Π° смартфонах ΠΈΠ»ΠΈ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ клавиши Π½Π° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… инструмСнтах ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹Ρ… ΠΏΠΎ USB/Bluetooth. Π­Ρ‚ΠΎΡ‚ способ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Ρ‚ΠΎΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π·Π°Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Π½.

ПослС попадания фокуса Π² модальноС ΠΎΠΊΠ½ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ элСмСнты Π²Π½ΡƒΡ‚Ρ€ΠΈ этого ΠΎΠΊΠ½Π°, Π½ΠΎ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π·Π° Π΅Π³ΠΎ ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹. Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, Ρ‚Π°ΠΊΠΎΠ΅ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΊΠ°ΠΊ Π»ΠΎΠ²ΡƒΡˆΠΊΠ° для фокуса. Π­Ρ‚ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ встроСно Π² <dialog>, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΎΡ‚ вас Π½ΠΈΠΊΠ°ΠΊΠΈΡ… дСйствий Π½Π΅ трСбуСтся. А Π²ΠΎΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π΄Ρ€ΡƒΠ³ΠΎΠΉ элСмСнт с role="dialog" Π΅Π³ΠΎ Π½ΡƒΠΆΠ½ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ срСдствами JavaScript.


ΠŸΡ€ΠΈ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΠΈΠΈ Π΄ΠΈΠ°Π»ΠΎΠ³Π°

ΠŸΡ€ΠΈ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΠΈΠΈ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° фокус Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Ρ‘Π½ Ρ‚ΡƒΠ΄Π°, Π³Π΄Π΅ ΠΎΠ½ Π±Ρ‹Π» Π² ΠΌΠΎΠΌΠ΅Π½Ρ‚ открытия. Π­Ρ‚ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π΅ являСтся Ρ‡Π°ΡΡ‚ΡŒΡŽ <dialog> ΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ оставляСт это Π½Π° усмотрСниС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°.

Но ΠΈ Ρ‚ΡƒΡ‚ Π΅ΡΡ‚ΡŒ ΠΎΠ΄Π½ΠΎ ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅: Ссли элСмСнт Π±ΠΎΠ»Π΅Π΅ Π½Π΅ доступСн, Ρ‚ΠΎΠ³Π΄Π° фокус Π½ΡƒΠΆΠ½ΠΎ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ Ρ‚ΡƒΠ΄Π°, ΠΎΡ‚ΠΊΡƒΠ΄Π° Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ.


ΠŸΡ€ΠΈΠΌΠ΅Ρ€

ΠŸΡ€Π΅Π΄Π»Π°Π³Π°ΡŽ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅. ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΠΌ систСму ΠΈΠ· Ρ‚Ρ€Π΅Ρ… Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Ρ… ΠΎΠΊΠΎΠ½:


  1. Π‘ΠΎΠΎΠ±Ρ‰Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ ΠΎΠ± Π½Π°Π»ΠΈΡ‡ΠΈΠΈ подписки. Π’ Π½Π΅ΠΌ Π΄Π²Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ: «Условия подписки» ΠΈ Β«ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡΒ»
  2. ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ΡΡ ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡƒ Π½Π° «Условия подписки». ΠžΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ΡΡ ΠΏΠΎΠ²Π΅Ρ€Ρ… ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ.
  3. ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ΡΡ ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡƒ Π½Π° Β«ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡΒ». ЗамСняСт собой ΠΏΠ΅Ρ€Π²ΠΎΠ΅.

Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… Π½ΠΈΠΆΠ΅ я ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ пропустил Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΈ элСмСнты, для упрощСния ΠΊΠΎΠ΄Π°.

Π˜Ρ‚Π°ΠΊ, Ρƒ нас Π΅ΡΡ‚ΡŒ стартовая ΠΊΠ½ΠΎΠΏΠΊΠ°.

<button>Рассылка</button> <!-- in focus -->

По Π½Π°ΠΆΠ°Ρ‚ΠΈΡŽ Π½Π° Π½Π΅Ρ‘ открываСтся ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Π΄ΠΈΠ°Π»ΠΎΠ³. Ѐокус автоматичСски пСрСмСщаСтся Π½Π° ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ элСмСнт. А Π·Π°ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ Π΄ΠΈΠ°Π»ΠΎΠ³Π° Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒ фокус Π½Π°Π·Π°Π΄.

β”Œβ–Ί<button>Рассылка</button>
β”‚
└─  <dialog open>
        <button>ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ</button> <!-- in focus -->
        <button>Условия подписки</button>
    </dialog>

Π”Π°Π»Π΅Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ фокус Π½Π° «Условия подписки» ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚. ΠžΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ΡΡ Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π΄ΠΈΠ°Π»ΠΎΠ³ ΠΏΠΎΠ²Π΅Ρ€Ρ… ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ. Ѐокус пСрСмСщаСтся Π² Π½Π΅Π³ΠΎ, Π° Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π½Π° эту ΠΆΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π² ΠΏΠ΅Ρ€Π²ΠΎΠΌ Π΄ΠΈΠ°Π»ΠΎΠ³Π΅:

β”Œβ–Ί<button>Рассылка</button>
β”‚
└─  <dialog open>
        <h3>Рассылка</h3>

        <button>ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ</button>
β”Œβ”€β”€β”€β”€β–Ί  <button>Условия подписки</button>
β”‚   </dialog>
β”‚
└─  <dialog open>
        <h3>Условия подписки</h3>

        <button>Ок</button> <!-- in focus -->
    </dialog>

ПослС закрытия Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ Π΄ΠΈΠ°Π»ΠΎΠ³Π° ваш JavaScript Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ фокус Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ «Условия подписки» Π² ΠΏΠ΅Ρ€Π²ΠΎΠΌ.

β”Œβ–Ί<button>Рассылка</button>
β”‚
└─  <dialog open>
        <button>ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ</button> 
        <button>Условия подписки</button> <!-- in focus -->
    </dialog>

ПослС Ρ‡Π΅Π³ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡΒ». По условиям нашСй Π·Π°Π΄Π°Ρ‡ΠΈ открываСтся Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ Π΄ΠΈΠ°Π»ΠΎΠ³. Ѐокус автоматичСски пСрСмСщаСтся Π² Π½Π΅Π³ΠΎ. А ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Π΄ΠΈΠ°Π»ΠΎΠ³ закрываСтся:

β”Œβ–Ί<button>Рассылка</button>
β”‚
└─  <dialog>
        <h3>Рассылка</h3>

β”Œβ”€β”€β”€β”€Γ—  <button>ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ</button>
β”‚       <button>Условия подписки</button>
β”‚   </dialog>
β”‚
β”‚   <dialog>
β”‚       <h3>Условия подписки</h3>
β”‚
β”‚       <button>Ок</button>
β”‚   </dialog>
β”‚
└─  <dialog open>
        <h3>Π’Π²Π΅Π΄ΠΈΡ‚Π΅ email</h3>

        <button>ΠŸΠΎΠ΄Ρ‚Π²Π΅Ρ€Π΄ΠΈΡ‚ΡŒ</button> <!-- in focus -->
    </dialog>

И Π²ΠΎΡ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°: Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ ΠΎΠΊΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ фокус Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Π² ΠΏΠ΅Ρ€Π²ΠΎΠΌ, Π½ΠΎ ΠΏΠ΅Ρ€Π²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ большС Π½Π΅ доступно. Π’ Ρ‚Π°ΠΊΠΈΡ… случаях фокус Π½ΡƒΠΆΠ½ΠΎ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ Ρ‚ΡƒΠ΄Π°, ΠΊΡƒΠ΄Π° ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π» Π·Π°ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΉ Π΄ΠΈΠ°Π»ΠΎΠ³ β€” Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ «Рассылка» с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π°Ρ‡Π°Π».

β”Œβ–Ί<button>Рассылка</button>
β”‚
β”‚   <dialog>
β”‚       <h3>Рассылка</h3>
β”‚
β”‚       <button>ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ</button>
β”‚       <button>Условия подписки</button>
β”‚   </dialog>
β”‚
β”‚   <dialog>
β”‚       <h3>Условия подписки</h3>
β”‚
β”‚       <button>Ок</button>
β”‚   </dialog>
β”‚
└─  <dialog open>
        <h3>Π’Π²Π΅Π΄ΠΈΡ‚Π΅ email</h3>

        <button>ΠŸΠΎΠ΄Ρ‚Π²Π΅Ρ€Π΄ΠΈΡ‚ΡŒ</button> <!-- in focus -->
    </dialog>

БСзусловно, Π² вашСм ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΌ случаС ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ для возвращСния фокуса. НапримСр, Ρƒ вас Π΄ΠΈΠ°Π»ΠΎΠ³ создания Π½ΠΎΠ²ΠΎΠΉ записи Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅. Π’ Ρ‚Π°ΠΊΠΎΠΌ случаС, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π»ΠΎΠ³ΠΈΡ‡Π½Π΅Π΅ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒ фокус Π½Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ ΡΠΎΠ·Π΄Π°Π½Π½ΡƒΡŽ Π·Π°ΠΏΠΈΡ‚ΡŒ.

ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, ΠΊΠ°ΠΊ Π²ΠΎ врСмя установки ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ Π² Windows ΠΌΠΎΠΆΠ½ΠΎ просто Π½Π°ΠΆΠΈΠΌΠ°Ρ‚ΡŒ Enter? Π’Π°ΠΊ Π²ΠΎΡ‚ это ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ…ΠΎΡ€ΠΎΡˆΠ΅ΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с фокусом: ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π΅ Π½Π° Π½ΠΎΠ²Ρ‹ΠΉ экран Π² фокус ставится элСмСнт, с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π²Ρ‹ скорСС всСго Π±ΡƒΠ΄Π΅Ρ‚Π΅ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ β€” ΠΊΠ½ΠΎΠΏΠΊΠ° Β«Π”Π°Π»Π΅Π΅Β» ΠΈΠ»ΠΈ Β«ΠžΠ±Π·ΠΎΡ€Β».


Подводя ΠΈΡ‚ΠΎΠ³


  1. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ сСмантичСскиС Ρ‚Π΅Π³ΠΈ <button> ΠΈ <dialog>.
  2. Π”Π΅Π»Π°ΠΉΡ‚Π΅ ваши ΠΎΠΊΠ½Π° достаточно большими.
  3. Π’ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠ½Π°Ρ… Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ.
  4. Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ содСрТимоС Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ связаны с элСмСнтом модального ΠΎΠΊΠ½Π°.
  5. Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ Ρ‡Ρ‚ΠΎ Π² Π΄ΠΈΠ°Π»ΠΎΠ³Π΅ Π΅ΡΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠ° для закрытия ΠΎΠΊΠ½Π°.
  6. ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΠΉΡ‚Π΅ фокус Π²Π½ΡƒΡ‚Ρ€ΡŒ ΠΏΡ€ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠΈ, Π½Π΅ выпускайтС Π΅Π³ΠΎ ΠΈΠ· модального ΠΎΠΊΠ½Π° ΠΈ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°ΠΉΡ‚Π΅ Ρ‚ΡƒΠ΄Π°, Π³Π΄Π΅ ΠΎΠ½ Π±Ρ‹Π» послС закрытия.

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ссылки


  • Modal Dialog Design Pattern in WAI-ARIA Authoring Practices 1.2
  • HTML Living Standard
  • Polyfill for the HTML dialog element
  • Filament group Modal

МодальноС окно

Π”Π°Π½Π½Ρ‹ΠΉ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ позволяСт ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ модальноС ΠΎΠΊΠ½ΠΎ ΠΏΡ€ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ дСйствия, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ.

Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚, ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ Π΅Π³ΠΎ с ΠΏΡ€Π°Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ конструктора интСрфСйсов Π½Π° ΠΏΠΎΠ»Π΅ для модСлирования ΠΈΠ»ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ +Π’ΠΈΠ΄ΠΆΠ΅Ρ‚. Π’ ΠΎΡ‚ΠΊΡ€Ρ‹Π²ΡˆΠ΅ΠΌΡΡ ΠΎΠΊΠ½Π΅ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ настройку.

Π’ΠΊΠ»Π°Π΄ΠΊΠ° Β«ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅Β»

  • Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ β€” это ΠΏΠΎΠ»Π΅ для Π²Π²ΠΎΠ΄Π° ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΠΎΠ³ΠΎ наимСнования ΠΎΠΊΠ½Π°. Настройку Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΡƒΡ‰Π΅ΡΡ‚Π²ΠΈΡ‚ΡŒ двумя способами: ввСсти Π΅Π³ΠΎ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ ΠΈΠ»ΠΈ Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ ссылки справа ΠΈ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅ΠΊΡΡ‚Π½ΡƒΡŽ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π° ΠΈΠ»ΠΈ прилоТСния Ρ‚ΠΈΠΏΠ° Π‘Ρ‚Ρ€ΠΎΠΊΠ°. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ контСкстной ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ мСню;
  • ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π±ΠΎΠΊΠΎΠ²ΡƒΡŽ панСль β€” позволяСт Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ отобраТСния Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ модального ΠΎΠΊΠ½Π°. Настройку ΠΎΠΏΡ†ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΡƒΡ‰Π΅ΡΡ‚Π²ΠΈΡ‚ΡŒ двумя способами: ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ„Π»Π°ΠΆΠΎΠΊ ΠΈΠ»ΠΈ Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ ссылки справа ΠΈ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π·Π°Ρ€Π°Π½Π΅Π΅ ΡΠΎΠ·Π΄Π°Π½Π½ΡƒΡŽ ΠΊΠΎΠ½Ρ‚Π΅ΠΊΡΡ‚Π½ΡƒΡŽ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π° ΠΈΠ»ΠΈ прилоТСния Ρ‚ΠΈΠΏΠ° Π’Ρ‹Π±ΠΎΡ€ Β«Π΄Π°/Π½Π΅Ρ‚Β». Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ контСкстной ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚Π²Π΅Ρ‡Π°Ρ‚ΡŒ Π·Π° ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ;
  • Π Π°Π·ΠΌΠ΅Ρ€* β€” позволяСт Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ отобраТСния модального ΠΎΠΊΠ½Π°;
  • ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠΊΠ½ΠΎ β€” позволяСт Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ, Π±ΡƒΠ΄Π΅Ρ‚ Π»ΠΈ ΠΎΠΊΠ½ΠΎ скрыто ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈΠ»ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ дСйствии. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ эту ΠΎΠΏΡ†ΠΈΡŽ двумя способами: ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ„Π»Π°ΠΆΠΎΠΊ ΠΈΠ»ΠΈ Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ ссылки справа ΠΈ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅ΠΊΡΡ‚Π½ΡƒΡŽ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π° ΠΈΠ»ΠΈ прилоТСния Ρ‚ΠΈΠΏΠ° Π’Ρ‹Π±ΠΎΡ€ Β«Π΄Π°/Π½Π΅Ρ‚Β», которая Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚Π²Π΅Ρ‡Π°Ρ‚ΡŒ Π·Π° Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΎΠΊΠ½Π°;

Π’ΠΊΠ»Π°Π΄ΠΊΠ° «Бобытия»

  • Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ ΠΏΡ€ΠΈ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΠΈΠΈ ΠΎΠΊΠ½Π° β€” функция, которая позволяСт Π²Π°ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ событиС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΈΡΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΠΈΠΈ модального ΠΎΠΊΠ½Π°.

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ контСкстных ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ… Ρ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅ Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π’ΠΈΠΏΡ‹ контСкста.

Π’ΠΊΠ»Π°Π΄ΠΊΠ° «БистСмныС»

БистСмныС настройки ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ для всСх Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠ². Они ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒΡŽ ΠΈ доступом Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠ², Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΡ… ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора, ΠΈ Ρ‚.Π΄. ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ «БистСмныС настройки Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠ²Β».

Для Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ настройки Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π° Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ, Π° Π·Π°Ρ‚Π΅ΠΌ ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

На Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ МодальноС ΠΎΠΊΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ для быстрого доступа ΠΊ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ Ρ„Π°ΠΉΠ»Π° Π΄ΠΎΠ³ΠΎΠ²ΠΎΡ€Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π΅ ΠΏΠΎΠ»Π΅.

МодальноС ΠΎΠΊΠ½ΠΎ Β· Bootstrap Π½Π° русском

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Π˜ΠΌΠ΅ΡŽΡ‚ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π΅ΠΌΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ, Π½ΠΎ гибкая, Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ с ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ Π½Π°Π±ΠΎΡ€ΠΎΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΈ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

autofocus Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ HTML Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ эффСкта Π² Bootstrap ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ Π³Π»Π°Π³ΠΎΠ»Ρ‹. для достиТСния Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΆΠ΅ эффСкта, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ JavaScript:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})
ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ Π½Π΅ поддСрТиваСтся

НС ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΠΉΡ‚Π΅ Π½ΠΎΠ²ΠΎΠ΅ модальноС ΠΎΠΊΠ½ΠΎ ΠΏΠΎΠΊΠ° Π΄Ρ€ΡƒΠ³ΠΎΠ΅ всё Π΅Ρ‰Ρ‘ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎ. ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ модального ΠΎΠΊΠ½Π° Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ написаниС Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°.

Π Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ модального ΠΎΠΊΠ½Π°

ВсСгда ΡΡ‚Π°Ρ€Π°ΠΉΡ‚Π΅ΡΡŒ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ модального ΠΎΠΊΠ½Π° Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅ HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ влияния Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов Π½Π° внСшний Π²ΠΈΠ΄ модального ΠΎΠΊΠ½Π° ΠΈ/ΠΈΠ»ΠΈ Π΅Π³ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ статичСского

ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½ΡƒΡŽ модальноС ΠΎΠΊΠ½ΠΎ Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, Ρ‚Π΅Π»ΠΎ, ΠΈ Π½Π°Π±ΠΎΡ€ дСйствий Π² Ρ„ΡƒΡ‚Π΅Ρ€Π΅.

<div>
  <div role="document">
    <div>
      <div>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h5>Modal title</h5>
      </div>
      <div>
        <p>One fine body&hellip;</p>
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div><!-- /.модальноС ΠΎΠΊΠ½ΠΎ-Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ -->
  </div><!-- /.модальноС окно-диалог -->
</div><!-- /.модальноС окно -->

Π”Π΅ΠΌΠΎ

ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ модальноС ΠΎΠΊΠ½ΠΎ Ρ‡Π΅Ρ€Π΅Π· JavaScript Π½Π°ΠΆΠ°Π² Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Π½ΠΈΠΆΠ΅. Он Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΊΠΎΠ»ΡŒΠ·ΠΈΡ‚ΡŒ Π²Π½ΠΈΠ· ΠΈ ΠΈΡΡ‡Π΅Π·Π°ΡŽΡ‚ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части страницы.

ВСкст Π² модальном ΠΎΠΊΠ½Π΅

Моллис Π£Π”Πž, Π΅ΡΡ‚ΡŒ Π½ΠΎΠΌΠ΅Ρ€Π° commodo ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌΠΎΠ΅ luctus, ниси erat porttitor Π»ΠΈΠ³ΡƒΠ»Ρ‹.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ΅Ρ€Ρ‹ Π² модальном ΠΎΠΊΠ½Π΅

Π­Ρ‚Π° ΠΊΠ½ΠΎΠΏΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡƒ.

Подсказки в модальном окнС

Π­Ρ‚Π° ссылка ΠΈ эта ссылка Π΄ΠΎΠ»ΠΆΠ½Π° ΠΈΠΌΠ΅Ρ‚ΡŒ подсказку ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.


ΠŸΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½ΡΡ тСкст для отобраТСния ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ;

ΠšΡ€Π° маттис миннСаполис пурус ΡΠΈΠ΄Π΅Ρ‚ΡŒ Π°ΠΌΠ΅Ρ‚ любого fermentum.. Одио хусто ΠšΡ€Π°, dapibus AC ΠΈ это Π², egestas Π΅Π³Π΅Ρ‚ ΠΊΠ²Π°ΠΌ. ΠœΠΎΡ€Π±ΠΈ Π›Π΅ΠΎ рисус, ΠΏΠΎΡ€Ρ‚Π° ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ Ρ‚ΠΎΠΊΠ° миннСаполис ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ Ρ‚ΠΎΠΊΠ°, прСддвСрия Π½Π° Эрос.

Praesent commodo курсус Β«ΠΌΠ°Π³Π½Π°Β», ООО «нисл» scelerisque миннСаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд Π΄ΠΎΠ»ΠΎΡ€ auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

ΠšΡ€Π° маттис миннСаполис пурус ΡΠΈΠ΄Π΅Ρ‚ΡŒ Π°ΠΌΠ΅Ρ‚ любого fermentum.. Одио хусто ΠšΡ€Π°, dapibus AC ΠΈ это Π², egestas Π΅Π³Π΅Ρ‚ ΠΊΠ²Π°ΠΌ. ΠœΠΎΡ€Π±ΠΈ Π›Π΅ΠΎ рисус, ΠΏΠΎΡ€Ρ‚Π° ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ Ρ‚ΠΎΠΊΠ° миннСаполис ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ Ρ‚ΠΎΠΊΠ°, прСддвСрия Π½Π° Эрос.

Praesent commodo курсус Β«ΠΌΠ°Π³Π½Π°Β», ООО «нисл» scelerisque миннСаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд Π΄ΠΎΠ»ΠΎΡ€ auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

ΠšΡ€Π° маттис миннСаполис пурус ΡΠΈΠ΄Π΅Ρ‚ΡŒ Π°ΠΌΠ΅Ρ‚ любого fermentum.. Одио хусто ΠšΡ€Π°, dapibus AC ΠΈ это Π², egestas Π΅Π³Π΅Ρ‚ ΠΊΠ²Π°ΠΌ. ΠœΠΎΡ€Π±ΠΈ Π›Π΅ΠΎ рисус, ΠΏΠΎΡ€Ρ‚Π° ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ Ρ‚ΠΎΠΊΠ° миннСаполис ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ Ρ‚ΠΎΠΊΠ°, прСддвСрия Π½Π° Эрос.

Praesent commodo курсус Β«ΠΌΠ°Π³Π½Π°Β», ООО «нисл» scelerisque миннСаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд Π΄ΠΎΠ»ΠΎΡ€ auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Launch demo modal

<!-- Кнопка запуска модального ΠΎΠΊΠ½Π° -->
<button type="button" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- МодальноС окно -->
<div tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div role="document">
    <div>
      <div>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h5>Modal title</h5>
      </div>
      <div>
        ...
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div>
  </div>
</div>
Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΌΠΎΠΆΠ½ΠΎ

НС Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ role="dialog" ΠΈ aria-labelledby="...", ΡΡΡ‹Π»Π°ΡΡΡŒ Π½Π° модальноС ΠΎΠΊΠ½ΠΎ Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ .modal, ΠΈ role="document" ΠΊ .modal-dialog сам.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄Π°Ρ‚ΡŒ описаниС вашСго модальноС ΠΎΠΊΠ½ΠΎ Π΄ΠΈΠ°Π»ΠΎΠ³ с aria-describedby Π½Π° .modal.

ΠžΠΏΡ†ΠΈΠΎΠ½Π½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Π˜ΠΌΠ΅ΡŽΡ‚ Π΄Π²Π° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, доступныС Ρ‡Π΅Ρ€Π΅Π· классы ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ Π½Π° .modal-dialog. Π­Ρ‚ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΡƒΠ΄Π°Ρ€ΠΎΠΌ Π² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ останова, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π½Π° ΡƒΠ·ΠΊΠΈΡ… ΠΎΠΊΠ½Π°Ρ….

Large modal Small modal

<!-- Π‘ΠΎΠ»ΡŒΡˆΠΈΠ΅ модальноС ΠΎΠΊΠ½ΠΎ -->
<button data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div>
    <div>
      ...
    </div>
  </div>
</div>

<!-- НСбольшой модальноС окно -->
<button type="button" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div>
    <div>
      ...
    </div>
  </div>
</div>

Π£Π΄Π°Π»ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ

Для ΠΌΠΎΠ΄Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ просто ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ, Π° Π½Π΅ ΠΈΡΡ‡Π΅Π·Π°ΡŽΡ‚, ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ .fade класс ΠΎΡ‚ модальноС ΠΎΠΊΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ.

<div tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ систСмы

Π§Ρ‚ΠΎΠ±Ρ‹ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ прСимущСствами Bootstrap блочная систСма Π² модальноС ΠΎΠΊΠ½ΠΎ, просто Π³Π½Π΅Π·Π΄ΠΎ .container-fluid Π’ .modal-body, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ блочная систСма классов Π²Π½ΡƒΡ‚Ρ€ΠΈ этого ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-2 .col-md-offset-4

.col-md-6 .col-md-offset-3

Level 1: .col-sm-9

Level 2: .col-xs-8 .col-sm-6

Level 2: .col-xs-4 .col-sm-6

Launch demo modal

<div tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
  <div role="document">
    <div>
      <div>
        <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h5>Modal title</h5>
      </div>
      <div>
        <div>
          <div>
            <div>.col-md-4</div>
            <div>.col-md-4 .col-md-offset-4</div>
          </div>
          <div>
            <div>.col-md-3 .col-md-offset-3</div>
            <div>.col-md-2 .col-md-offset-4</div>
          </div>
          <div>
            <div>.col-md-6 .col-md-offset-3</div>
          </div>
          <div>
            <div>
              Level 1: .col-sm-9
              <div>
                <div>
                  Level 2: .col-xs-8 .col-sm-6
                </div>
                <div>
                  Level 2: .col-xs-4 .col-sm-6
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div>
  </div>
</div>
<div>
  <button type="button" data-toggle="modal" data-target="#gridSystemModal">
    Launch demo modal
  </button>
</div>

ИзмСнСния модальноС ΠΎΠΊΠ½ΠΎ ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, основанного Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ пуска

Π•ΡΡ‚ΡŒ ΠΊΡƒΡ‡Π° ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ модальноС ΠΎΠΊΠ½ΠΎ, просто с Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·Π½Ρ‹ΠΌ содСрТаниСм? Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ event.relatedTarget ΠΈ HTML data-* Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ (Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Ρ‡Π΅Ρ€Π΅Π· jQuery) Π²Π°Ρ€ΡŒΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ содСрТимым модального ΠΎΠΊΠ½Π° Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, какая ΠΊΠ½ΠΎΠΏΠΊΠ° Π±Ρ‹Π»Π° Π½Π°ΠΆΠ°Ρ‚Π°. Π‘ΠΌ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹Π΅ свСдСния Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… событий relatedTarget.

Open modal for @mdo Open modal for @fat Open modal for @getbootstrap
<div>
  <button type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
  <button type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
  <button type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
  <div tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div role="document">
      <div>
        <div>
          <button type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h5>New message</h5>
        </div>
        <div>
          <form>
            <div>
              <label for="recipient-name">Recipient:</label>
              <input type="text">
            </div>
            <div>
              <label for="message-text">Message:</label>
              <textarea></textarea>
            </div>
          </form>
        </div>
        <div>
          <button type="button" data-dismiss="modal">Close</button>
          <button type="button">Send message</button>
        </div>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Кнопка, Ρ‡Ρ‚ΠΎ спровоцировало модальноС ΠΎΠΊΠ½ΠΎ
  var recipient = button.data('whatever') // Π˜Π·Π²Π»Π΅Ρ‡Π΅Π½ΠΈΠ΅ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΈΠ· Π΄Π°Π½Π½Ρ‹Ρ…-* Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ²
  // Если Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ, Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ здСсь AJAX-запрос (ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ Π² ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ Π²Ρ‹Π·ΠΎΠ²Π°).
  // ОбновлСниС модальноС ΠΎΠΊΠ½ΠΎ ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. ΠœΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ jQuery здСсь, Π½ΠΎ вмСсто Π½Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ привязки Π΄Π°Π½Π½Ρ‹Ρ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ².
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° с динамичСской высоты

Если Высота модальноС ΠΎΠΊΠ½ΠΎ измСнСния Π²ΠΎ врСмя Π΅Π΅ открытия, Π’Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ·Π²ΠΎΠ½ΠΈΡ‚ΡŒ $('#myModal').data('bs.modal').handleUpdate() ΠΏΠΎΠ΄Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ модальноС окно’s ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Π² случаС появляСтся полоса ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.

ИспользованиС

Π’ модальноС ΠΎΠΊΠ½ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ваш скрытый ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΏΠΎ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΡŽ, Ρ‡Π΅Ρ€Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ»ΠΈ JavaScript. Он Ρ‚Π°ΠΊΠΆΠ΅ добавляСт .modal-open Π½Π° <body> ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΈ создаСт .modal-backdrop, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ для ΡƒΠ²ΠΎΠ»ΡŒΠ½Π΅Π½ΠΈΡ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ Π³Π»Π°Π³ΠΎΠ»Ρ‹ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π²Π½Π΅ модальноС ΠΎΠΊΠ½ΠΎ.

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π΄Π°Π½Π½Ρ‹Ρ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ²

АктивируйтС модальноС ΠΎΠΊΠ½ΠΎ Π±Π΅Π· записи JavaScript. Набор data-toggle="modal" Π½Π° элСмСнт ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π°, ΠΊΠ½ΠΎΠΏΠΊΠΈ, вмСстС с data-target="#foo" ΠΈΠ»ΠΈ href="#foo", Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π°Ρ‚ΡŒΡΡ для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ модальноС ΠΎΠΊΠ½ΠΎ для ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Π§Π΅Ρ€Π΅Π· JavaScript

Π’Ρ‹Π·ΠΎΠ² модальноС ΠΎΠΊΠ½ΠΎ с ΠΊΠΎΠ΄ΠΎΠΌ myModal Π‘ ΠΎΠ΄Π½ΠΎΠΉ строки JavaScript:

$('#myModal').modal(options)

Π’Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒΡΡ Ρ‡Π΅Ρ€Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ»ΠΈ JavaScript. Для Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Π΄Π°Π½Π½Ρ‹Ρ…, Π²Π²Π΅Π΄ΠΈΡ‚Π΅ имя ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ data-, Π° Π½Π° data-backdrop="".

ИмяВипПо ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
backdropboolean or the string 'static'trueΠ’ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя модальноС ΠΎΠΊΠ½ΠΎ-Ρ„ΠΎΠ½ элСмСнта. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅ static Π½Π° Ρ„ΠΎΠ½Π΅ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π½Π΅ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ модальноС ΠΎΠΊΠ½ΠΎ ΠΏΠΎ Ρ‰Π΅Π»Ρ‡ΠΊΡƒ.
keyboardbooleantrueΠ—Π°ΠΌΡ‹ΠΊΠ°Π΅Ρ‚ модальноС ΠΎΠΊΠ½ΠΎ ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ клавиши Escape
showbooleantrueΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ модальноС ΠΎΠΊΠ½ΠΎ ΠŸΡ€ΠΈ ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ.

ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹

.modal(options)

АктивируСт ваш ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² модальноС ΠΎΠΊΠ½ΠΎ. ΠŸΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ object.

$('#myModal').modal({
  keyboard: false
})
.modal('toggle')

ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ Π½Π° модальноС ΠΎΠΊΠ½ΠΎ. Π’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Π°Π±ΠΎΠ½Π΅Π½Ρ‚Ρƒ Π΄ΠΎ модальноС ΠΎΠΊΠ½ΠΎ фактичСски Π±Ρ‹Π»ΠΎ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ ΠΈΠ»ΠΈ скрыто (Ρ‚. Π΅. shown.bs.modal ΠΈΠ»ΠΈ hidden.bs.modal события).

$('#myModal').modal('toggle')
.modal('show')

Π’Ρ€ΡƒΡ‡Π½ΡƒΡŽ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ модальноС ΠΎΠΊΠ½ΠΎ. Π’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Π°Π±ΠΎΠ½Π΅Π½Ρ‚Ρƒ Π΄ΠΎ модальноС ΠΎΠΊΠ½ΠΎ фактичСски Π±Ρ‹Π»ΠΎ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ (Ρ‚. Π΅. shown.bs.modal события).

$('#myModal').modal('show')
.modal('hide')

Π’Ρ€ΡƒΡ‡Π½ΡƒΡŽ скрываСт модальноС ΠΎΠΊΠ½ΠΎ. Π’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Π°Π±ΠΎΠ½Π΅Π½Ρ‚Ρƒ Π΄ΠΎ модальноС ΠΎΠΊΠ½ΠΎ На самом Π΄Π΅Π»Π΅ Π±Ρ‹Π» скрытым (Ρ‚. Π΅. hidden.bs.modal события).

$('#myModal').modal('hide')

Бобытия

Bootstrap модальноС ΠΎΠΊΠ½ΠΎ класс прСдоставляСт нСсколько событий для навСски модальноС ΠΎΠΊΠ½ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. ВсС модальноС ΠΎΠΊΠ½ΠΎ события обстрСляли модальноС ΠΎΠΊΠ½ΠΎ сама ΠΏΠΎ сСбС (Ρ‚. Π΅. <div>).

Π’ΠΈΠΏ Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΡΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
show.bs.modalΠ­Ρ‚ΠΎ событиС Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ сразу ΠΆΠ΅, ΠΊΠΎΠ³Π΄Π° show способ экзСмпляра называСтся. Если Π²Ρ‹Π·Ρ‹Π²Π°Π΅ΠΌΠΎΠ΅ Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠΌ, Ρ‰Π΅Π»Ρ‡ΠΊΠ΅ элСмСнт, ΠΊΠ°ΠΊ relatedTarget свойство события.
shown.bs.modalΠ­Ρ‚ΠΎ событиС запускаСтся, ΠΊΠΎΠ³Π΄Π° модальноС ΠΎΠΊΠ½ΠΎ стала Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ (Π±ΡƒΠ΄Π΅Ρ‚ ΠΆΠ΄Π°Ρ‚ΡŒ CSS ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ для Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ). Если Π²Ρ‹Π·Ρ‹Π²Π°Π΅ΠΌΠΎΠ΅ Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠΌ, Ρ‰Π΅Π»Ρ‡ΠΊΠ΅ элСмСнт ΠΊΠ°ΠΊ relatedTarget свойство события.
hide.bs.modalΠ­Ρ‚ΠΎ событиС сразу ΠΆΠ΅ выполняСтся, ΠΊΠΎΠ³Π΄Π° вызываСтся экзСмпляр ΠΌΠ΅Ρ‚ΠΎΠ΄Π° hide.
hidden.bs.modalΠ­Ρ‚ΠΎ событиС запускаСтся, ΠΊΠΎΠ³Π΄Π° модальноС ΠΎΠΊΠ½ΠΎ Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΠ» Π±Ρ‹Ρ‚ΡŒ скрыта ΠΎΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ (Π±ΡƒΠ΄Π΅Ρ‚ ΠΆΠ΄Π°Ρ‚ΡŒ CSS ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ для Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ).
$('#myModal').on('hidden.bs.modal', function (e) {
  // ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ...
})

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ модальноС ΠΎΠΊΠ½ΠΎ ΠΈ ΠΊΠΎΠ³Π΄Π° Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ?

Π›ΡŽΠ±ΠΎΠΉ ΠΎΠΏΡ‹Ρ‚ Π½Π° Π²Π΅Π±-сайтС ΠΏΠΎΠ΄ΠΎΠ±Π΅Π½ ΠΌΠΎΠ·Π°ΠΈΠΊΠ΅ ΠΈΠ· Π±ΠΎΠ»Π΅Π΅ ΠΌΠ΅Π»ΠΊΠΈΡ… элСмСнтов Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ. Π’ΠΎΡ‚ ΠΎΠ΄Π½Π° ΠΈΠ· Ρ‚Π΅Ρ…, с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ Π²Ρ‹, вСроятно, ΡΡ‚ΠΎΠ»ΠΊΠ½ΡƒΠ»ΠΈΡΡŒ: Π²Ρ‹ просматриваСтС сайт ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚Π΅ ΠΊΠ°ΠΊΡƒΡŽ-Ρ‚ΠΎ ΠΊΠ½ΠΎΠΏΠΊΡƒ. Π‘Ρ€Π°Π·Ρƒ ΠΆΠ΅ страница исчСзаСт, ΠΈ Π½Π° вашСм экранС появляСтся Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‰Π΅Π΅ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ сообщСниС ΠΈΠ»ΠΈ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‰Π΅Π΅ дСйствиС, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ подписку Π½Π° список рассылки ΠΈΠ»ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ прСдлоТСния ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Π°ΠΌ Π±Ρ‹Π»ΠΎ приятно ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ это Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ, Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ, Π²Ρ‹ Π±Ρ‹Π»ΠΈ ΡƒΠ΄ΠΈΠ²Π»Π΅Π½Ρ‹ ΠΈ сбиты с Ρ‚ΠΎΠ»ΠΊΡƒ. Но ΠΊΠ°ΠΊ Π±Ρ‹ Π²Ρ‹ Π½ΠΈ ΠΎΡ‚Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Π»ΠΈ, это ΠΎΠΊΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ»ΠΎ вашС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅.Π’ Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°Ρ… Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° этот Ρ‚ΠΈΠΏ дисплСя называСтся ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ .

ΠœΠΎΠ΄Π°Π»Ρ‹ Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΏΠΎΠ»ΡΡ€ΠΈΠ·Π°Ρ†ΠΈΡŽ ΠΊΠ°ΠΊ срСди Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ², Ρ‚Π°ΠΊ ΠΈ срСди ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. МногиС цСнят свою ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡ‚ΡŒ быстро ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ Ρ‡Π΅ΠΌΡƒ-Ρ‚ΠΎ Π²Π°ΠΆΠ½ΠΎΠΌΡƒ, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΡΡ‡ΠΈΡ‚Π°ΡŽΡ‚ ΠΈΡ… Π½Π΅ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ прСпятствиСм для взаимодСйствия с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ.

На ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ всС зависит ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π»ΠΈ спроСктировано модальноС ΠΎΠΊΠ½ΠΎ ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ Π»ΠΈ ΠΎΠ½ смысл. Если всС сдСлано ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ, ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌΠΈ ΠΊΠ°ΠΊ для Π²Π°ΡˆΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, Ρ‚Π°ΠΊ ΠΈ для Π²Π°ΡˆΠΈΡ… чисСл: согласно Π½Π΅Π΄Π°Π²Π½Π΅ΠΌΡƒ исслСдованию ΠΏΠΎΡ‡Ρ‚ΠΈ 2 ΠΌΠΈΠ»Π»ΠΈΠ°Ρ€Π΄ΠΎΠ² ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… ΠΎΠΊΠΎΠ½, 10% Π»ΡƒΡ‡ΡˆΠΈΡ… исполнитСлСй ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΡƒΡŽΡ‚ΡΡ с ΠΏΠΎΡ€Π°Π·ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒΡŽ β€” 9.28%.

Π£Π±Π΅ΠΆΠ΄Π΅Π½Ρ‹? Π’ этом постС ΠΌΡ‹ рассмотрим, ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Ρ‚Π°ΠΊ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚. ΠœΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ обсудим, ΠΊΠΎΠ³Π΄Π°, Π³Π΄Π΅ ΠΈ ΠΊΠ°ΠΊ эффСктивно Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Π½Π° вашСм сайтС.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ модальноС ΠΎΠΊΠ½ΠΎ?

МодальноС ΠΎΠΊΠ½ΠΎ (Ρ‚Π°ΠΊΠΆΠ΅ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΠΎΠ΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΎΠΊΠ½ΠΎΠΌ ΠΈΠ»ΠΈ лайтбоксом) β€” это элСмСнт Π²Π΅Π±-страницы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ отобраТаСтся ΠΏΠ΅Ρ€Π΅Π΄ всСм ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ содСрТимым страницы ΠΈ Π΄Π΅Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΡƒΠ΅Ρ‚ Π΅Π³ΠΎ. Π§Ρ‚ΠΎΠ±Ρ‹ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ ΠΊ основному ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Ρƒ, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΎΠΊΠ½ΠΎΠΌ, Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΠ² дСйствиС ΠΈΠ»ΠΈ Π·Π°ΠΊΡ€Ρ‹Π² Π΅Π³ΠΎ.ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для привлСчСния внимания ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΊ Π²Π°ΠΆΠ½ΠΎΠΌΡƒ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ ΠΈΠ»ΠΈ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π½Π° Π²Π΅Π±-сайтС ΠΈΠ»ΠΈ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ.

НазначСниС ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΈΠΌ словом: фокус. Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ посСтитСли ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΠΈΠ»ΠΈΡΡŒ Π½Π° Ρ‡Π΅ΠΌ-Ρ‚ΠΎ простом, модальноС ΠΎΠΊΠ½ΠΎ β€” ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ эффСктивных срСдств для этого. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π»ΠΈΠ±ΠΎ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ модальноС ΠΎΠΊΠ½ΠΎ, Π»ΠΈΠ±ΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π² Π½Π΅ΠΌ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ дСйствиС (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ сообщСниС ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ «ОК», Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΡƒ ΠΈ Ρ‚. Π”.).

Π’ΠΎΡ‚ простой ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΎΡ‚ ТитСля Нью-Π™ΠΎΡ€ΠΊΠ°.Π­Ρ‚ΠΎ модальноС ΠΎΠΊΠ½ΠΎ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π½Π°ΠΌ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° ΠΈΡ… ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ Π±ΡŽΠ»Π»Π΅Ρ‚Π΅Π½ΡŒ.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ изобраТСния

Помимо направлСния фокуса, ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΎΠ±Π»Π°Π΄Π°ΡŽΡ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ прСимущСствами ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ элСмСнтами отобраТСния. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° ΡƒΠΏΡ€ΠΎΡ‰Π°ΡŽΡ‚ Ρ€Π°Π±ΠΎΡ‚Ρƒ. ВсС остаСтся Π½Π° ΠΎΠ΄Π½ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅, помогая посСтитСлям ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ Π½Π° связи с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π΄Π΅Π»Π°Π»ΠΈ Π΄ΠΎ появлСния модального ΠΎΠΊΠ½Π°.

Π’ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ Π½Π° Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ²Π΅Ρ€Π΅Π½Ρ‹, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Π²ΠΈΠ΄Π½Ρ‹. Если Π±Ρ‹ вмСсто этого ΠΏΡ€ΠΈΠ³Π»Π°ΡˆΠ΅Π½ΠΈΠ΅ появилось Π² Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠ³ Π±Ρ‹ ΠΏΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΈΠ»ΠΈ инстинктивно Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ Π½ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π±Ρ‹Π» обусловлСн Ρ€Π°Π·Π΄Ρ€Π°ΠΆΠ°ΡŽΡ‰ΠΈΠΌΠΈ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌΠΈ Ρ€Π΅ΠΊΠ»Π°ΠΌΠ½Ρ‹ΠΌΠΈ ΠΎΠΊΠ½Π°ΠΌΠΈ.

НаконСц, ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ мСсто Π½Π° страницС, отобраТая ΠΈΠ·Π±Ρ€Π°Π½Π½Ρ‹Π΅ ΠΌΠ΅Π΄ΠΈΠ°Ρ„Π°ΠΉΠ»Ρ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ изобраТСния ΠΈΠ»ΠΈ Π²ΠΈΠ΄Π΅ΠΎ, Π² лайтбоксС.

МодальноС и нСмодальноС

ΠœΡ‹ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌ этот Ρ‚ΠΈΠΏ элСмСнта Β«ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌΒ», ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π²Π²ΠΎΠ΄ΠΈΡ‚ Π²Ρ‚ΠΎΡ€ΠΈΡ‡Π½Ρ‹ΠΉ Β«Ρ€Π΅ΠΆΠΈΠΌΒ» β€” ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс β€” Π½Π° Π²Π΅Π±-страницу, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΎΠ½ появляСтся. МодальноС ΠΎΠΊΠ½ΠΎ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ страницы ΠΈ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΡΡ„ΠΎΠΊΡƒΡΠΈΡ€ΠΎΠ²Π°Π»ΠΈΡΡŒ Π½Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ ΠΎΠΊΠ½Π΅, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ. Π’Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ модальноС ΠΎΠΊΠ½ΠΎ Β«Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΌΒ» ΠΎΠΊΠ½ΠΎΠΌ, Π° ΠΎΡΡ‚Π°Π»ΡŒΠ½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ страницы β€” Β«Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΌΒ» ΠΎΠΊΠ½ΠΎΠΌ.

ΠŸΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ модального элСмСнта являСтся Β«Π½Π΅ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉΒ» элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ΅ ΠΎΠΊΠ½ΠΎ. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ всСгда ΠΌΠΎΠ³ΡƒΡ‚ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ, ΠΏΠΎΠΊΠ° ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ Π½Π΅ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт. ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π½Π΅ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… элСмСнтов Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню, Π±ΠΎΠΊΠΎΠ²ΡƒΡŽ панСль ΠΈΠ»ΠΈ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Ρ‰Π΅Π»ΠΊΠ°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты страницы.

Когда ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅?

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° эффСктивны всякий Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΡƒΠ²ΠΈΠ΄Π΅Π»ΠΈ ΠΈΠ»ΠΈ сдСлали Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ΅. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ (Π½ΠΎ Π½Π΅ всСгда) ΠΎΠ½ΠΈ ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ послС Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€Π½ΠΎΠ³ΠΎ события, Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, событиС ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΈΠ»ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π½Π°ΠΌΠ΅Ρ€Π΅Π½ΠΈΠ΅ Π²Ρ‹Ρ…ΠΎΠ΄Π°.НаиболСС распространСнныС Π²ΠΈΠ΄Ρ‹ использования ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ прСдупрСТдСния, оповСщСния, подтвСрТдСния, Ρ„ΠΎΡ€ΠΌΡ‹, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠ° ΠΈ многоэтапныС процСссы

ΠŸΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΡ, прСдупрСТдСния ΠΈ подтвСрТдСния

Для Ρ‚Π΅Ρ… случаСв, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ подходят для привлСчСния внимания. МодальноС ΠΎΠΊΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΌ событии ΠΈΠ»ΠΈ ошибкС, ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΎ послСдствиях ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ дСйствия ΠΈΠ»ΠΈ ΠΏΠΎΠ΄Ρ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠ΅ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎΠ³ΠΎ процСсса. НапримСр:

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ изобраТСния

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½Ρ‹Ρ… сообщСний.НапримСр, ошибки, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ ΠΏΡ€Π΅ΠΏΡΡ‚ΡΡ‚Π²ΡƒΡŽΡ‚ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡŽ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ дСйствия (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Β«ΠœΡ‹ Π½Π΅ смогли Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ваш запрос ΠΈΠ·-Π·Π° ошибки сСрвСра. ΠžΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ страницу ΠΈ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Π΅Ρ‰Π΅ Ρ€Π°Π·Β») ΠΈ дСйствия, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ нСльзя ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Β«Π’Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Ρ‹ Π²Ρ‹ ΡƒΠ²Π΅Ρ€Π΅Π½Ρ‹, Ρ‡Ρ‚ΠΎ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ? Β») ΡΠ²Π»ΡΡŽΡ‚ΡΡ вСскими ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°ΠΌΠΈ для модального ΠΎΠΊΠ½Π°. ΠŸΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΎ Β«ΠΏΠΎΠ»ΠΈΡ‚ΠΈΠΊΠ΅ Ρ„Π°ΠΉΠ»ΠΎΠ² cookieΒ», Π½Π΅ Ρ‚Π°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ β€” сохранитС это для нСмодального ΠΎΠΊΠ½Π° ΠΈΠ»ΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ ΡƒΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ.

Π€ΠΎΡ€ΠΌΡ‹

Если процСсс Π½Π° вашСм Π²Π΅Π±-сайтС Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, прСдоставлСнной ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΡƒ Π²Π½ΡƒΡ‚Ρ€ΠΈ модального ΠΎΠΊΠ½Π°.Π’Ρ‹ часто Π±ΡƒΠ΄Π΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ это ΠΊΠ°ΠΊ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρƒ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ страницС для Π²Ρ…ΠΎΠ΄Π° / рСгистрации ΠΈΠ»ΠΈ страницС, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ³Π°ΡŽΡ‚ΡΡ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ Π±ΡŽΠ»Π»Π΅Ρ‚Π΅Π½ΠΈ ΠΏΠΎ элСктронной ΠΏΠΎΡ‡Ρ‚Π΅, прСдлоТСния ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΈΠ»ΠΈ ΠΊΠΎΠ΄ скидки.

МногиС Π²Π΅Π±-сайты, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Boston Globe, ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ свой ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ участниками, ΠΈ ΠΎΠ± этом ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠΎΠ±Ρ‰ΠΈΡ‚ΡŒ Π½Π΅ Ρ‡Π»Π΅Π½Π°ΠΌ Ρ‡Π΅Ρ€Π΅Π· модальноС ΠΎΠΊΠ½ΠΎ:

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ изобраТСния

ΠžΠ±Ρ‹Ρ‡Π½ΠΎ Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€ΠΎΠΌ для этого Ρ‚ΠΈΠΏΠ° модального ΠΎΠΊΠ½Π° являСтся Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ ΠΏΡ€ΠΈΠ·Ρ‹Π² ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ ΠΈΠ»ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ часто сайты Π·Π°ΠΏΡƒΡΠΊΠ°ΡŽΡ‚ модальноС ΠΎΠΊΠ½ΠΎ послС события ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ. Π’Π°ΠΌ Ρ€Π΅ΡˆΠ°Ρ‚ΡŒ, считаСтС Π»ΠΈ Π²Ρ‹ этот Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€ слишком ΠΎΡ‚Π²Π»Π΅ΠΊΠ°ΡŽΡ‰ΠΈΠΌ, Π½ΠΎ Π·Π½Π°ΠΉΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ посСтитСли Π±ΡƒΠ΄ΡƒΡ‚ обСспокоСны этим, Ссли сочтут Π΅Π³ΠΎ нСсущСствСнным.

МСдиа-дисплСи

Media часто ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ основноС содСрТимоС Π²Π΅Π±-страницы ΠΈ Π·Π°Π΄Π°Π΅Ρ‚ Ρ‚ΠΎΠ½ для просмотра. Однако, Ссли галСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ Π²ΠΈΠ΄Π΅ΠΎ слуТит Ρ†Π΅Π½Ρ‚Ρ€ΠΎΠΌ внимания Π½Π° вашСм сайтС, модальноС ΠΎΠΊΠ½ΠΎ позволяСт посСтитСлям ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΡ… ΠΈΠ·ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ, Π½Π΅ открывая ΠΈΡ… Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ страницС.

НапримСр, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Ρƒ Π½Π° Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΉ страницС, Ρ‡Ρ‚ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ модальноС ΠΎΠΊΠ½ΠΎ для Π³Π°Π»Π΅Ρ€Π΅ΠΈ связанных ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π»Π΅Π³ΠΊΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ½ΠΎΠΏΠΎΠΊ со стрСлками с ΠΎΠ±Π΅ΠΈΡ… сторон ΠΎΠΊΠ½Π°.Π­Ρ‚Π° рСализация эффСктивна, Π² частности, для дСмонстрации ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ² ΠΈ ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ.

ΠœΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ модальноС ΠΎΠΊΠ½ΠΎ Π²ΠΈΠ΄Π΅ΠΎ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ Π²ΠΈΠ΄Π΅ΠΎ ΠΊΠ°ΠΊ собствСнный нСбольшой ΠΊΠΈΠ½ΠΎΡ‚Π΅Π°Ρ‚Ρ€, Π° Π·Π°Ρ‚Π΅ΠΌ закрываСтся, ΠΊΠΎΠ³Π΄Π° Π²ΠΈΠ΄Π΅ΠΎ Π·Π°Π²Π΅Ρ€ΡˆΠ°Π΅Ρ‚ΡΡ. На ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ страницС Π²Π΅Π±-сайта ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΏΡ€ΠΎΠ²Π°ΠΉΠ΄Π΅Ρ€Π° Starry пСрСчислСны нСсколько Π²ΠΈΠ΄Π΅ΠΎΡ€ΠΎΠ»ΠΈΠΊΠΎΠ², прСдставлСнных ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ изобраТСния

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ прСимущСством использования ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ для отобраТСния ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠ° являСтся экономия мСста. ΠœΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠ° ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‚ Ρ†Π΅Π½Π½ΠΎΠ΅ пространство страницы, Π½ΠΎ доступ ΠΊ Π³Π°Π»Π΅Ρ€Π΅Π΅ ΠΈΠ»ΠΈ Π²ΠΈΠ΄Π΅ΠΎΠΏΡ€ΠΎΠΈΠ³Ρ€Ρ‹Π²Π°Ρ‚Π΅Π»ΡŽ с ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½Π½Ρ‹ΠΌ эскизом позволяСт ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ Ρ†Π΅Π½Π½ΠΎΠ΅ пространство.

ΠœΠ½ΠΎΠ³ΠΎΡΡ‚ΡƒΠΏΠ΅Π½Ρ‡Π°Ρ‚Ρ‹Π΅ процСссы

Для Π±ΠΎΠ»Π΅Π΅ Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΈ энСргоСмких дСйствий Π½Π° вашСм Π²Π΅Π±-сайтС β€” создания профиля ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, подписки Π½Π° услугу ΠΈΠ»ΠΈ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ настройки инструмСнта β€” рассмотритС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ раздСлСния ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ шага Π² собствСнноС модальноС ΠΎΠΊΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ удобство Π±Ρ‹Π»ΠΎ Π±ΠΎΠ»Π΅Π΅ управляСмым. Π­Ρ‚ΠΎΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹Ρ… прилоТСниях Π² Π²ΠΈΠ΄Π΅ «мастСра» ΠΈΠ»ΠΈ «руководства для установщика». ΠŸΡ€ΠΎΠ³Ρ€Π΅ΡΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² ΠΎΠΊΠ½Π΅ Π² Π²ΠΈΠ΄Π΅ полосы, ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΡ… Ρ‚ΠΎΡ‡Π΅ΠΊ, чисСл ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°.

Pinterest Ρ…ΠΎΡ€ΠΎΡˆΠΎ справляСтся с этим с процСссом создания ΡƒΡ‡Π΅Ρ‚Π½ΠΎΠΉ записи.ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ прогрСсса Π²Π²Π΅Ρ€Ρ…Ρƒ.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ изобраТСния

ΠžΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΎΠΊΠ½ΠΎΠΌ

  1. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Π½Π°ΠΌΠ΅Ρ€Π΅Π½Π½ΠΎ ΠΈ нСчасто.
  2. ΠžΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ всС элСмСнты Ρ„ΠΎΠ½Π°.
  3. ΠΠ°ΠΏΠΈΡˆΠΈΡ‚Π΅ Ρ‡Π΅Ρ‚ΠΊΠΈΠ΅ инструкции ΠΈ тСкст ΠΊΠ½ΠΎΠΏΠΊΠΈ.
  4. Π”Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π²Ρ‹Ρ…ΠΎΠ΄.
  5. ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ установитС Ρ€Π°Π·ΠΌΠ΅Ρ€ модального ΠΎΠΊΠ½Π°.
  6. ВвСсти ΠΈ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ модальноС ΠΎΠΊΠ½ΠΎ с ΠΏΠ»Π°Π²Π½Ρ‹ΠΌ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠΌ.
  7. ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах.
  8. Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ ваши ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° доступными.

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ распространСны Π² сСти, Ρ‡Ρ‚ΠΎ ваши посСтитСли ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΡ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΎΡ‚ бСссмыслСнных ΠΈΠ»ΠΈ ΠΏΠ»ΠΎΡ…ΠΎ спроСктированных. Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ ваши ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΈΠΌΠ΅ΡŽΡ‚ высокоС качСство, слСдуя этим восьми ΠΏΠ΅Ρ€Π΅Π΄ΠΎΠ²Ρ‹ΠΌ ΠΌΠ΅Ρ‚ΠΎΠ΄Π°ΠΌ проСктирования ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½:

1. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Π½Π°ΠΌΠ΅Ρ€Π΅Π½Π½ΠΎ ΠΈ нСчасто.

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΏΠΎ своСй ΠΏΡ€ΠΈΡ€ΠΎΠ΄Π΅ Ρ€Π°Π·Ρ€ΡƒΡˆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹. Они, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π½Π΅ΠΎΠΆΠΈΠ΄Π°Π½Π½ΠΎ ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ Π² процСссС просмотра ΠΈ всСгда ΡΠΌΠ΅Ρ‰Π°ΡŽΡ‚ фокус с Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΎΠΊΠ½Π°.Π­Ρ‚ΠΎ Π΄ΠΎΡ€ΠΎΠ³ΠΎ обходится ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ, поэтому ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° всСгда Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠΎΠΌΠΎΠ³Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π² достиТСнии Π΅Π³ΠΎ Ρ†Π΅Π»Π΅ΠΉ, Π° Π½Π΅ ΠΌΠ΅ΡˆΠ°Ρ‚ΡŒ ΠΈΠΌ.

Π§Ρ‚ΠΎΠ±Ρ‹ посСтитСли Π½Π΅ Ρ€Π°Π·Π΄Ρ€Π°ΠΆΠ°Π»ΠΈΡΡŒ вашим сайтом, Ρ€Π°Π·Π²Π΅Ρ€Ρ‚Ρ‹Π²Π°ΠΉΡ‚Π΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ это Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ, ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли ΠΎΠ½ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π² достиТСнии ΠΈΡ… основной Ρ†Π΅Π»ΠΈ. Π§Ρ‚ΠΎ-Ρ‚ΠΎ мСньшСС, ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°Π±Ρ‹Ρ‚ΡŒ ΠΎ своСй ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Ρ†Π΅Π»ΠΈ ΠΈ Ρ€Π°Π·ΠΎΡ‡Π°Ρ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ.

Для ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠΉ ΠΈ ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠΉ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ критичСскиС ошибки ΠΈ постоянныС дСйствия Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒ модальноС ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Π§Ρ‚ΠΎ касаСтся Ρ„ΠΎΡ€ΠΌ, ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°ΠΉΡ‚Π΅ΡΡŒ Ρ‚Π΅Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΎΠ±ΠΈΡ€Π°ΡŽΡ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΈΠ»ΠΈ, ΠΏΠΎ ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅, Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠ°ΡŽΡ‚ ΠΈΡ… взаимодСйствиС с вашим сайтом.И всС этапы многоэтапного модального процСсса Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ прямоС ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ ΠΊ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΉ Ρ†Π΅Π»ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

Для Π»ΡŽΠ±Ρ‹Ρ… ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… элСмСнтов ΠΈΠ»ΠΈ шагов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‚ трСбованиям, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π±Π΅Π·Ρ€Π΅ΠΆΠΈΠΌΠ½Ρ‹ΠΉ дисплСй.

2. ΠžΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ всС элСмСнты Ρ„ΠΎΠ½Π°.

Π§Ρ‚ΠΎΠ±Ρ‹ эффСктивно ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ всС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½ΠΎΠΌΡƒ ΠΎΠΊΠ½Ρƒ, всС Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ элСмСнты Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ ΡƒΠ±Ρ€Π°Π½Ρ‹ Π·Π° Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΌ ΠΎΠΊΠ½ΠΎΠΌ.

Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Ρ€Π°Π·ΠΌΡ‹Π²Π°ΡŽΡ‚ ΠΈ / ΠΈΠ»ΠΈ Π·Π°Ρ‚Π΅ΠΌΠ½ΡΡŽΡ‚ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ ΠΈΠ»ΠΈ всС Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ элСмСнты. Π­Ρ‚ΠΎ создаСт Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ модальноС ΠΎΠΊΠ½ΠΎ находится Π½Π°Π΄ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ.нСкоторая Ρ‚Π΅Π½ΡŒ Π²ΠΎΠΊΡ€ΡƒΠ³ модального ΠΎΠΊΠ½Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ этот эффСкт.

Π€ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π½ΠΈ ΠΎΠ΄ΠΈΠ½ элСмСнт страницы Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ модального ΠΎΠΊΠ½Π° Π½Π΅ доступСн для Ρ‰Π΅Π»Ρ‡ΠΊΠ° ΠΈΠ»ΠΈ Π²Ρ‹Π±ΠΎΡ€Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹, Π° Ρ‚Π°ΠΊΠΆΠ΅ рассмотритС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ. Π›ΡŽΠ±Ρ‹Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΉ страницы Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΡΡ‹Π»Π°Ρ‚ΡŒ ΡΠΌΠ΅ΡˆΠ°Π½Π½Ρ‹Π΅ сигналы ΠΎ Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΈ модального ΠΎΠΊΠ½Π°.

Π•Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ Π²Π°ΠΆΠ½ΠΎΠ΅ Π·Π°ΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ модальноС ΠΎΠΊΠ½ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ всС ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ΅ содСрТимоС страницы нСдоступным, ΠΏΠΎΠΊΠ° ΠΎΠ½ΠΎ Π½Π΅ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΠΎ, вся информация, нСобходимая ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ для Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ модального ΠΎΠΊΠ½Π°, Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ прСдоставлСна ​​в самом модальном ΠΎΠΊΠ½Π΅.ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ ΠΊ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΌΡƒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Ρƒ для Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ модального ΠΎΠΊΠ½Π° β€” любая Π·Π°Π΄Π°Ρ‡Π°, Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰Π°Ρ Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ, Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для нСмодального дисплСя.

3. ΠΠ°ΠΏΠΈΡˆΠΈΡ‚Π΅ Ρ‡Π΅Ρ‚ΠΊΠΈΠ΅ инструкции ΠΈ тСкст ΠΊΠ½ΠΎΠΏΠΊΠΈ.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ быстро ΠΏΡ€ΠΈΡΠΏΠΎΡΠΎΠ±ΠΈΡ‚ΡŒΡΡ ΠΊ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½ΠΎΠΌΡƒ дисплСю ΠΈ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΎΠ½ Ρ‚Π°ΠΌ появился, сдСлайтС вСсь тСкст максимально ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌ ΠΈ ясным. ВсС ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ тСкст Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ указываСтся Ρ†Π΅Π»ΡŒ модального ΠΎΠΊΠ½Π° ΠΈΠ»ΠΈ Ρ‚Ρ€Π΅Π±ΡƒΠ΅ΠΌΠΎΠ³ΠΎ дСйствия. ΠΠ°ΠΏΠΈΡˆΠΈΡ‚Π΅ тСкст ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ подсказки ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ Π±Ρ‹Π»ΠΈ ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌΠΈ ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятными.

4. Π”Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π²Ρ‹Ρ…ΠΎΠ΄.

КаТдоС Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π΅ модальноС ΠΎΠΊΠ½ΠΎ позволяСт ΠΏΠΎ ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅ ΠΎΠ΄Π½ΠΎ дСйствиС, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ Π΅Π³ΠΎ. БоглашСниС гласит, Ρ‡Ρ‚ΠΎ ΠΎΠΊΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°ΠΆΠΌΠ΅Ρ‚ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Π²Ρ‹Ρ…ΠΎΠ΄Π° ΠΈΠ»ΠΈ Ρ‰Π΅Π»ΠΊΠ½Π΅Ρ‚ символ Β«XΒ» ΠΈΠ»ΠΈ тСкст Β«Π—Π°ΠΊΡ€Ρ‹Ρ‚ΡŒΒ» Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΠΈΠ»ΠΈ ΠΏΡ€Π°Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ модального ΠΎΠΊΠ½Π°.

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΎΠΊΠ½ΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Ρ‰Π΅Π»ΠΊΠ°Π΅Ρ‚ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ модального ΠΎΠΊΠ½Π°, ΠΈ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ размСщСния ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«ΠžΡ‚ΠΌΠ΅Π½Π°Β» Π²Π½ΡƒΡ‚Ρ€ΠΈ модального ΠΎΠΊΠ½Π° Π² качСствС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Β«ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒΒ».

5.ΠŸΠΎΠ΄Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ модального ΠΎΠΊΠ½Π°.

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΠΊΠ°ΠΊ слой ΠΏΠΎΠ²Π΅Ρ€Ρ… Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΎΠΊΠ½Π°. Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ Π΅Π³ΠΎ слишком большим, ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ модальноС ΠΎΠΊΠ½ΠΎ β€” это ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ новая страница, слишком малСнькая, ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ Π΅Π³ΠΎ Π·Π° Ρ€Π΅ΠΊΠ»Π°ΠΌΡƒ.

Π₯ΠΎΡ€ΠΎΡˆΠ°Ρ рСкомСндация β€” ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΡ‚ΡŒ модальноС ΠΎΠΊΠ½ΠΎ максимум 50% ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅ высотой, хотя Ρ‚ΠΎΡ‡Π½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ Π·Π°Π²ΠΈΡΠ΅Ρ‚ΡŒ ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ помСститС Π² модальноС ΠΎΠΊΠ½ΠΎ.

6. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ ΠΈ Π·Π°ΠΊΡ€ΠΎΠΉΡ‚Π΅ модальноС ΠΎΠΊΠ½ΠΎ с постСпСнным ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠΌ.

Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ эффСкт ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ с Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° Π½Π° Π΄ΠΎΡ‡Π΅Ρ€Π½Π΅Π΅ ΠΎΠΊΠ½ΠΎ. ΠšΡ€Π°Ρ‚ΠΊΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠ΅ исчСзновСниС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ содСрТимого ΠΈ постСпСнноС исчСзновСниС модального ΠΎΠΊΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ практичСски Π² любом сцСнарии β€” Π±ΠΎΠ»Π΅Π΅ насыщСнный событиями ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, вставка) ΠΈΠ»ΠΈ отсутствиС ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ нСприятным.

ВСрнСмся ΠΊ Π½Π°ΡˆΠ΅ΠΌΡƒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ со Π·Π²Π΅Π·Π΄ΠΎΠΉ, ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ модальноС Π²ΠΈΠ΄Π΅ΠΎ быстро, Π½ΠΎ ΠΏΠ»Π°Π²Π½ΠΎ исчСзаСт ΠΈΠ· поля зрСния, Π° Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ содСрТимоС затСмняСтся:

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ изобраТСния

7. ΠžΠ³Ρ€Π°Π½ΠΈΡ‡ΡŒΡ‚Π΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Π½Π° мобильном Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π΅.

ВсС описанныС мною конструктивныС особСнности ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ подходят для экранов Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΎΠ², Π½ΠΎ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ устройства β€” совсСм Π΄Ρ€ΡƒΠ³ΠΎΠ΅ Π΄Π΅Π»ΠΎ. Π£ΠΌΠ΅Π½ΡŒΡˆΠ΅Π½Π½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана услоТняСт созданиС Π²ΠΈΠ΄Π° Β«ΠΎΠΊΠ½ΠΎ Π² ΠΎΠΊΠ½Π΅Β», Π½Π΅ выглядя слишком большим ΠΈΠ»ΠΈ слишком малСньким.

Если Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ модальноС ΠΎΠΊΠ½ΠΎ Π½Π° своСм ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌ сайтС, рассмотритС вмСсто этого Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ нСмодального элСмСнта ΠΈΠ»ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ модального содСрТимого Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ Π½Π° Π½ΠΎΠ²ΠΎΠΉ страницС. Если Π²Ρ‹ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅Ρ‚Π΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Π½Π° своСм мобильном сайтС, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹Π΅, Ρ€Π°Π·Π±ΠΎΡ€Ρ‡ΠΈΠ²Ρ‹Π΅ ΠΈ простыС Π² использовании.

8. Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ ваши ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° доступными.

Π― ΡƒΠΆΠ΅ Π·Π°Ρ‚Ρ€ΠΎΠ½ΡƒΠ» ΠΏΠ°Ρ€Ρƒ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»Π΅ΠΉ Π²Π΅Π±-доступности Π² этом спискС β€” Π²ΠΎΡ‚ нСсколько распространСнных ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ², ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΡ… ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ваши ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° доступными для всСх:

  • КаТдоС Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Π² модальном ΠΎΠΊΠ½Π΅ Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹. Клавиша Π²Ρ‹Ρ…ΠΎΠ΄Π° Π΄ΠΎΠ»ΠΆΠ½Π° Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΎΠΊΠ½ΠΎ, Π° клавиши табуляции ΠΈ Π²Π²ΠΎΠ΄Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для Π²Ρ‹Π±ΠΎΡ€Π° ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ².
  • ВсС ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ элСмСнты Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ модального ΠΎΠΊΠ½Π° Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ доступны с ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹, ΠΏΠΎΠΊΠ° модальноС ΠΎΠΊΠ½ΠΎ находится Π² ΠΏΠΎΠ»Π΅ зрСния.
  • МодальноС ΠΎΠΊΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΊΠΎΠ½Ρ‚Ρ€Π°ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΉ страницСй.
  • ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ Π² модальноС ΠΎΠΊΠ½ΠΎ ΠΈ ΠΈΠ· Π½Π΅Π³ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΏΠ»Π°Π²Π½Ρ‹ΠΌΠΈ ΠΈ нСброскими.
  • Π›ΡŽΠ±Ρ‹Π΅ изобраТСния, Π²ΠΈΠ΄Π΅ΠΎ ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠ° Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΎΠΏΠΈΡΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст.
  • Π’Π΅ΡΡŒ тСкст ΠΈ ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠ° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ чтСния с экрана ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ.

Как Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠΎΠ΄Ρ‹ Π² CSS

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π±Π°Π·ΠΎΠ²ΠΎΠ΅ модальноС ΠΎΠΊΠ½ΠΎ Π½Π° ваш сайт, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS ΠΈ HTML.Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ рассмотрСли Π² этом руководствС, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½ΠΎΡƒ-Ρ…Π°Ρƒ CSS. W3Schools прСдоставляСт простой, Π½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ шаблон ΠΊΠΎΠ΄Π° для Π½Π°Ρ‡Π°Π»Π° Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠΌ CSS, ΠΈΠ»ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ бСсплатный шаблон ΠΈΠ· Free Frontend ΠΈΠ»ΠΈ Material Design для Bootstrap.

Как Π±Ρ‹ Π²Ρ‹ Π½ΠΈ Ρ€Π΅ΡˆΠΈΠ»ΠΈ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ свои ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π°, Π½Π΅ Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΡ‚ΡŒ ΠΈΡ… использованиС Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΌΠΈ случаями. Π­Ρ‚ΠΎ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ β€” врСмя ΠΎΡ‚ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚ΡŒ внимания ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ, Ссли это Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ слуТит ΠΈΡ… ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΉ Ρ†Π΅Π»ΠΈ ΠΈ обСспСчиваСт Π΄ΠΎΡΡ‚Π°Ρ‚ΠΎΡ‡Π½ΡƒΡŽ Ρ†Π΅Π½Π½ΠΎΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΡ€Π°Π²Π΄Π°Ρ‚ΡŒ ΠΊΡ€Π°Ρ‚ΠΊΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹ΠΉ сбой.Для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ модального ΠΎΠΊΠ½Π° слСдуСт ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Π΅Π³ΠΎ Ρ†Π΅Π»ΡŒ Π² ΠΏΡƒΡ‚ΠΈ посСтитСля ΠΈ ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ Π½Π°ΡˆΠΈΡ… Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊ Π² ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ.

ΠœΠΎΠ΄Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ

β€” СдинствСнная концСпция ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π½Π΅ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡŽΡ‚ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² | Π€Π°Π±ΠΈΠ°Π½ Π‘Π΅Π±Π°ΡΡ‚ΡŒΡΠ½

Π’ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ ΠΌΠΈΡ€Π΅ Ρ€Π°Π·Π»ΠΈΡ‡ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΈ Π½Π΅ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ экранами часто ΠΌΠ΅Π½Π΅Π΅ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ. НапримСр, полноэкранный Π²ΠΈΠ΄ изобраТСния являСтся ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, хотя это Π½Π΅ процСсс ΠΈΠ»ΠΈ Π΄ΠΈΠ°Π»ΠΎΠ³. ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ экран Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ смысл Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… особых ситуациях для создания фокуса.Если Π±Ρ‹ наш экран с подробностями ΠΎ ΠΊΠΎΡ‚Π΅Π½ΠΊΠ΅ (Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅) Π±Ρ‹Π» ΠΊΠΎΠ½Π΅Ρ‡Π½Ρ‹ΠΌ Π²ΠΈΠ΄ΠΎΠΌ Π±Π΅Π· Π΄Ρ€ΡƒΠ³ΠΈΡ… дСйствий, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π² , ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ (полноэкранный Π²ΠΈΠ΄). Но ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π³Π»ΡƒΠ±ΠΆΠ΅ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π΅ ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ дСйствия ( ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ, , Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, …), ΠΎΠ½ большС Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‡Π΅Ρ‚ΠΊΠΎΠΉ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, являСтся Ρ‡Π°ΡΡ‚ΡŒΡŽ основного ΠΏΠΎΡ‚ΠΎΠΊΠ°. Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, ΠΠ΅ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ Π²ΠΈΠ΄ .

Π’ обязанности Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° Π²Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΎΡ†Π΅Π½ΠΊΠ° Ρ‚ΠΎΠ³ΠΎ, являСтся Π»ΠΈ дСйствиС самодостаточным ΠΈΠ»ΠΈ Ρ‡Π°ΡΡ‚ΡŒΡŽ ΠΎΠ±Ρ‰Π΅Π³ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ° исслСдования прилоТСния, ΠΈ Ρ€Π΅ΡˆΠ°Ρ‚ΡŒ, ΠΈΠΌΠ΅Π΅Ρ‚ Π»ΠΈ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ смысл ΠΈΠ»ΠΈ Π½Π΅Ρ‚.Π’ случаС сомнСний вспомнитС слова Apple:

Π‘Π²Π΅Π΄ΠΈΡ‚Π΅ ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΡƒ использованиС ΠΌΠΎΠ΄Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, люди ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽΡ‚ Π½Π΅Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠ΅ взаимодСйствиС с прилоТСниями. РассматривайтС созданиС модального контСкста Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° критичСски Π²Π°ΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Ρ‡ΡŒΠ΅-Ρ‚ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠΎΠ³Π΄Π° Π·Π°Π΄Π°Ρ‡Π° Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½Π° ΠΈΠ»ΠΈ ΠΎΡ‚ΠΌΠ΅Π½Π΅Π½Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ использованиС прилоТСния ΠΈΠ»ΠΈ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π²Π°ΠΆΠ½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅. β€” Apple

ΠžΡ‚ΠΊΠ°Π· ΠΎΡ‚ отвСтствСнности: ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, интСрфСйс ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Π±Π΅Π· строгого различия ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΈ Π½Π΅ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ прСдставлСниями. Однако концСпция ΠΌΠΎΠ΄Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π³Π»ΡƒΠ±ΠΎΠΊΠΎ ΡƒΠΊΠΎΡ€Π΅Π½ΠΈΠ»Π°ΡΡŒ Π² интСрфСйсных экосистСмах Apple, Google, Microsoft ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… прСдприятий, ΠΈ Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΈ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ оТидания.

Apple Π½Π΅ Π±Ρ‹Π»Π° Π±Ρ‹ Apple, Ссли Π±Ρ‹ ΠΎΠ½Π° врСмя ΠΎΡ‚ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π½Π΅ Π½Π°Ρ€ΡƒΡˆΠ°Π»Π° свои собствСнныС ΠΏΡ€Π°Π²ΠΈΠ»Π°: Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½ΠΎΠ²Ρ‹ΠΉ App Store ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ основныС ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρ‹ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ «БСгодня» Π² Π²ΠΈΠ΄Π΅ модального экрана, Π½ΠΎ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΊ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ Π²Π½ΠΈΠ·Ρƒ модального экрана (Π½Π΅Ρ‚ Ρ‡Π΅Ρ‚ΠΊΠΎΠΉ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ). Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π³Π»ΡƒΠ±ΠΆΠ΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΏΠΎ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½ΠΎΠΌΡƒ экрану, Π½Π΅ имСя фиксированной ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ. Π’ процСссС ΠΎΠ½ΠΈ Ρ‚Π΅Ρ€ΡΡŽΡ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΈ большС Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ модальноС прСдставлСниС Π½Π° подстраницах. ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ экрана прилоТСния ΠΈΠ· Ρ‡Π΅Π³ΠΎ-Ρ‚ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ, ΠΊΡ€ΠΎΠΌΠ΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ, ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ экран отобраТаСтся ΠΊΠ°ΠΊ Π½Π΅ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ экран.Π­Ρ‚ΠΎ сохраняСт панСль Π²ΠΊΠ»Π°Π΄ΠΎΠΊ ΠΈ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹Π΅ дСйствия (Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡ΠΎΠΊ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ Π΅Ρ‰Π΅ Ρ€Π°Π·, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π½Π° Π΅Π΅ Π³Π»Π°Π²Π½Ρ‹ΠΉ экран).

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π°: всС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° β€” ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ способ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π²Π°ΠΆΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ. Π’ΠΎΡ‚ 5 основных Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΉ ΠΏΠΎ ΠΈΡ… ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΌΡƒ использованию

Π›ΡŽΠ±ΠΈΡ‚Π΅ Π»ΠΈ Π²Ρ‹ ΠΈΡ…, Π½Π΅Π½Π°Π²ΠΈΠ΄ΠΈΡ‚Π΅ ΠΈΠ»ΠΈ просто ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΡƒΠ΅Ρ‚Π΅, модальноС ΠΎΠΊΠ½ΠΎ β€” ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ инструмСнт. Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, ΡΡ‚ΠΈΠΌΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ участиС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΈ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈΠΌ Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΈ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ.

Π’ этом постС ΠΌΡ‹ расскаТСм, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ модальноС ΠΎΠΊΠ½ΠΎ, ΠΊΠΎΠ³Π΄Π° Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, ΠΈ рассмотрим 5 основных ΠΏΠ΅Ρ€Π΅Π΄ΠΎΠ²Ρ‹Ρ… ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊ для создания собствСнного ΠΎΠΊΠ½Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта прототипирования.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ модальноС ΠΎΠΊΠ½ΠΎ?

Если Π²Ρ‹ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ ΠΏΡ‹Ρ‚Π°Π»ΠΈΡΡŒ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ» ΠΈΠ»ΠΈ Π²Ρ‹ΠΉΡ‚ΠΈ ΠΈΠ· Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° Π±Π΅Π· сохранСния, Π·Π½Π°Ρ‡ΠΈΡ‚, Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ с ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΎΠΊΠ½ΠΎΠΌ. Они довольно распространСны Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π²Ρ‹Π½ΡƒΠΆΠ΄Π΅Π½ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Π²Π°ΠΆΠ½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅.

ΠŸΡ€ΠΎΡ‰Π΅ говоря, модальноС ΠΎΠΊΠ½ΠΎ (ΠΈΠ»ΠΈ модальноС Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ) β€” это Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ появляСтся ΠΏΠΎΠ²Π΅Ρ€Ρ… основного содСрТимого ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΈ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ дСйствий со стороны ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.МодальноС ΠΎΠΊΠ½ΠΎ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ появляСтся послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΡƒΠΆΠ΅ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΠ» дСйствиС.

Π­Ρ‚ΠΎ дСйствиС ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ, Π½ΠΎ Π½Π΅ ограничиваСтся:

  • Π—Π°ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Π²ΠΊΠ»Π°Π΄ΠΎΠΊ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅
  • Π’Ρ‹Ρ…ΠΎΠ΄ ΠΈΠ· прилоТСния Π±Π΅Π· сохранСния
  • Π”Π΅Π»Π°Π΅Ρ‚ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ€Π°Ρ‚ΠΈΠΌΠΎΠ΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€: Β« Π’Ρ‹ ΡƒΠ²Π΅Ρ€Π΅Π½Ρ‹, Ρ‡Ρ‚ΠΎ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ навсСгда ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ эти 5 элСмСнтов?Β»

Когда Π½Π° экранС появляСтся модальноС ΠΎΠΊΠ½ΠΎ, Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ прилоТСния часто ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ (ΠΎΠ½ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ» Ρ€Π΅ΠΆΠΈΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса), ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с ΠΎΠΊΠ½ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π΄Π΅Π»Π°Π».

Когда ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ модальноС ΠΎΠΊΠ½ΠΎ?

Π‘Ρ‹Π²Π°ΡŽΡ‚ случаи, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ модальноС ΠΎΠΊΠ½ΠΎ Π½Π° своих Π²Π΅Π±-сайтах ΠΈ ​​в ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… прилоТСниях.

β€’ ΠŸΡ€ΠΈΠ²Π»Π΅Ρ‡Π΅Π½ΠΈΠ΅ внимания ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ

Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ Π²Π°ΠΆΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, модальноС ΠΎΠΊΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ. НапримСр, Π² вашСм антивирусном ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠΌ обСспСчСнии ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡΠ²ΠΈΡ‚ΡŒΡΡ модальноС ΠΎΠΊΠ½ΠΎ, ΡΠΎΠΎΠ±Ρ‰Π°ΡŽΡ‰Π΅Π΅ Π²Π°ΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ Π³ΠΎΡ‚ΠΎΠ²ΠΎ ΠΊ ΡΠΊΠ°Π½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ Π½Π° Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ‹ ΡΠΎΠ±ΠΈΡ€Π°Π΅Ρ‚Π΅ΡΡŒ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π΅Π· сохранСния.

Π₯отя Π Π°ΠΉΠΌΠΎΠ½Π΄ Π§Π΅Π½ писал, Ρ‡Ρ‚ΠΎ это ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ люди боятся Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π°. Π›ΡŽΠ΄ΠΈ боятся ΠΎΡ‚Π²Π΅Ρ‡Π°Ρ‚ΡŒ Π½Π° вопрос, Ссли отвСтят Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ. Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ людСй ΠΏΠΎ ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡ΠΊΠ΅ Π½Π°ΠΆΠΈΠΌΠ°ΡŽΡ‚ Β«ΠžΡ‚ΠΌΠ΅Π½Π°Β».

β€’ ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ модальноС ΠΎΠΊΠ½ΠΎ, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π²Π²Π΅Π» ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, особСнно Ссли эта информация Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠ° для продолТСния использования интСрфСйса. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ Π² Ρ„ΠΎΡ€ΠΌΠ΅ Π΄ΠΈΠ°Π»ΠΎΠ³Π° рСгистрации ΠΈΠ»ΠΈ Π²Ρ…ΠΎΠ΄Π° Π² систСму.Однако Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‰Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ страницу Π²Ρ…ΠΎΠ΄Π° ΠΈ рСгистрации, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ мСсто.

β€’ Когда Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π°ΠΏΡ€ΠΎΡΠΈΡ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, которая ΠΌΠΎΠ³Π»Π° Π±Ρ‹ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ ΠΈΠ»ΠΈ усилия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ

МодСли

Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ особСнно Ρ…ΠΎΡ€ΠΎΡˆΠΎ, Ссли ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для получСния ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡƒΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‰Π΅.

Допустим, Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ΄Π°Ρ‚ΡŒ заявку Π½Π° ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ ссуды Ρ‡Π΅Ρ€Π΅Π· Π²Π΅Π±-сайт Π±Π°Π½ΠΊΠ°. ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° заявку Π½Π° ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ ΠΊΡ€Π΅Π΄ΠΈΡ‚Π° ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡΠ²ΠΈΡ‚ΡŒΡΡ модальноС ΠΎΠΊΠ½ΠΎ с вопросом, Π²Π»Π°Π΄Π΅Π΅Ρ‚Π΅ Π»ΠΈ Π²Ρ‹ собствСнным Π΄ΠΎΠΌΠΎΠΌ.

Π­Ρ‚Π° информация ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Π° для ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ части процСсса, избавляя ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΎΡ‚ нСобходимости Π·Π°ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Ρ†Π΅Π»Ρ‹ΠΉ Π±Π»ΠΎΠΊ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, относящСйся ΠΊ ΠΈΡ… ΠΈΠΏΠΎΡ‚Π΅ΠΊΠ΅.

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ прСдоставлСно: Анна

5 основных ΠΏΠ΅Ρ€Π΅Π΄ΠΎΠ²Ρ‹Ρ… ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊ проСктирования ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½

ΠžΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ модальноС ΠΎΠΊΠ½ΠΎ Π² ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ΅. Π’Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ Ρ‰Π΅Π»Ρ‡ΠΊΠ° ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΎΡ‚ΠΌΠ΅Π½Ρ‹ со стороны ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, свСдя ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΡƒ Π»ΡŽΠ±Ρ‹Π΅ ΠΎΡ‚Π²Π»Π΅ΠΊΠ°ΡŽΡ‰ΠΈΠ΅ Ρ„Π°ΠΊΡ‚ΠΎΡ€Ρ‹ ΠΈΠ»ΠΈ разочарования.Π‘Π»Π΅Π΄ΡƒΠΉΡ‚Π΅ этим простым рСкомСндациям, ΠΊΠΎΠ³Π΄Π° Π±ΡƒΠ΄Π΅Ρ‚Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ свои собствСнныС.

ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚Π΅ вашС модальноС ΠΎΠΊΠ½ΠΎ

Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ своС модальноС ΠΎΠΊΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ послС ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠ²Π°Π»ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ события, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ ΠΏΡƒΡ‚Π°Π½ΠΈΡ†Ρ‹ ΠΈ сбоСв Π² Ρ€Π°Π±ΠΎΡ‚Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. Π—Π°ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° Π±Π΅Π· сохранСния β€” это ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΊΠ²Π°Π»ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ событиС для модального ΠΎΠΊΠ½Π°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ вас ΡΠΏΡ€Π°ΡˆΠΈΠ²Π°ΡŽΡ‚, Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π»ΠΈ Π²Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π²Π°ΡˆΡƒ Ρ€Π°Π±ΠΎΡ‚Ρƒ.

Если модальноС ΠΎΠΊΠ½ΠΎ появляСтся случайным ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ дСйствий со стороны ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Ρ‚ΠΎ для ΠΎΠΊΠ½Π° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ контСкста.Π‘ΠΊΠΎΡ€Π΅Π΅ всСго, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π·Π°Ρ…ΠΎΡ‡Π΅Ρ‚ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΎΠΊΠ½ΠΎ, Π½Π΅ глядя Π½Π° Π΅Π³ΠΎ содСрТимоС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ быстрСС Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π΄Π΅Π»Π°Π»ΠΈ Π΄ΠΎ прСрывания.

Π­ΠΊΠΎΠ½ΠΎΠΌΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π°

Π’ ΠΈΠ΄Π΅Π°Π»Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ свСсти использованиС модального ΠΎΠΊΠ½Π° ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΡƒ. Π’Π΅Ρ€Π΅Π·Π° ​​ЀСссСндСн ΠΏΠΈΡˆΠ΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π·Π°Π±Ρ‹Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π΄Π΅Π»Π°Π»ΠΈ.

Π­Ρ‚ΠΎ Π½Π°Ρ€ΡƒΡˆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΊΠΎΠ³Π½ΠΈΡ‚ΠΈΠ²Π½ΡƒΡŽ Π½Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ ΠΈ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π·Π°Π±Ρ‹Ρ‚ΡŒ Π΄Π΅Ρ‚Π°Π»ΠΈ, связанныС с Π΅Π³ΠΎ ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π΄Π°Ρ‡Π΅ΠΉ.Если Π² вашСм мобильном ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΈΠ»ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ слишком ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½, Ρ‚ΠΎ Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ придСтся Π½Π΅Π»Π΅Π³ΠΊΠΎ.

АдаптивноС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½

UX-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎ. Когда Ρ€Π΅Ρ‡ΡŒ Π·Π°Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΎ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠ½Π°Ρ…, ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ Π½Π° Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°Ρ… ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах. Если вашС модальноС ΠΎΠΊΠ½ΠΎ Π½Π΅ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΎ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств, это ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΡ…ΡƒΠ΄ΡˆΠΈΡ‚ΡŒ удобство использования.

Π˜ΠΌΠ΅ΠΉΡ‚Π΅ Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°Π·ΠΎΡ‡Π°Ρ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠ½Π°Ρ…, особСнно Ссли ΠΎΠ½ΠΈ ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°ΡŽΡ‚ΡΡ с Π½ΠΈΠΌΠΈ ΠΏΡ€ΠΈ просмотрС Π²Π΅Π±-страниц Π½Π° мобильном устройствС.

Богласно исслСдованию, ΠΏΡ€ΠΎΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌΡƒ Π‘Ρ‚ΠΈΠ²Π΅Π½ΠΎΠΌ Π₯ΡƒΠ±Π΅Ρ€ΠΎΠΌ, 75% людСй ΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π½Π° свой большой ΠΏΠ°Π»Π΅Ρ†, Π° 49% людСй ΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π½Π° Ρ…Π²Π°Ρ‚ ΠΎΠ΄Π½ΠΎΠΉ Ρ€ΡƒΠΊΠΎΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π½Π° своСм мобильном Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π΅.

ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠ΅ пространство Π½Π΅ ΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ ошибок, ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ довольно большими ΠΈ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ. НС Π»ΡƒΡ‡ΡˆΠΈΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΎΠΏΡ‹Ρ‚.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ Π±Ρ‹ Π½Π΅ ΠΈΠ·Π±Π°Π²ΠΈΡ‚ΡŒΡΡ ΠΎΡ‚ Ρ…Π»ΠΎΠΏΠΎΡ‚ ΠΏΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ модального ΠΎΠΊΠ½Π° с нуля ΠΈ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· мноТСства Π½Π°Π±ΠΎΡ€ΠΎΠ² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса для использования Π² своих ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°Ρ…?

Π­Ρ‚ΠΎ Π½Π΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½Π΅ слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ модальноС ΠΎΠΊΠ½ΠΎ Π½Π° мобильном Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π΅, просто Ссли Π²Ρ‹ ΡΠΎΠ±ΠΈΡ€Π°Π΅Ρ‚Π΅ΡΡŒ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, Π»ΡƒΡ‡ΡˆΠ΅ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ спроСктировано с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

ΠžΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎΡΡ‚ΡŒ

ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ модального ΠΎΠΊΠ½Π° Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ выглядит ΠΈ ощущаСтся ΠΊΠ°ΠΊ Ρ‡Π°ΡΡ‚ΡŒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ прилоТСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΎΠ½ΠΎ Π±Π»ΠΎΠΊΠΈΡ€ΡƒΠ΅Ρ‚.

Если модальноС ΠΎΠΊΠ½ΠΎ сильно отличаСтся ΠΎΡ‚ ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ интСрфСйса, Π±ΡƒΠ΄ΡŒ Ρ‚ΠΎ эстСтика ΠΈΠ»ΠΈ копия, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΏΡ€ΠΎΡΠΈΡ‚ΡŒ сСбя, Ρ‡Ρ‚ΠΎ это спам. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΡΠ»ΠΎΠΆΠ½ΠΈΡ‚ΡŒ построСниС Π΄ΠΎΠ²Π΅Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΉ с вашим ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ.

Π˜Π·Π±Π΅Π³Π°ΠΉΡ‚Π΅ использования модального ΠΎΠΊΠ½Π° для Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… ΠΎΠΊΠΎΠ½ списка рассылки

Π’ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ довольно часто Π±Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π²ΠΎΠΌ посСщСнии Π²Π΅Π±-сайта появляСтся Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ модальноС ΠΎΠΊΠ½ΠΎ с ΠΏΡ€ΠΎΡΡŒΠ±ΠΎΠΉ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ Π±ΡŽΠ»Π»Π΅Ρ‚Π΅Π½ΡŒ.

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ хотят, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΡ‹Π²Π°Π»ΠΈΡΡŒ Π½Π° ΠΈΡ… ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ Π±ΡŽΠ»Π»Π΅Ρ‚Π΅Π½ΡŒ, Π½ΠΎ это ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ΄ΠΎΡ€Π²Π°Ρ‚ΡŒ Π΄ΠΎΠ²Π΅Ρ€ΠΈΠ΅. Плюс это Ρ€Π°Π·Π΄Ρ€Π°ΠΆΠ°Π΅Ρ‚. Π£ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π½Π΅ Π±Ρ‹Π»ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΡƒΡŽ-Π»ΠΈΠ±ΠΎ ΠΏΠΎΠ»ΡŒΠ·Ρƒ ΠΎΡ‚ Π²Π΅Π±-страницы, Ρ‚Π°ΠΊ Π·Π°Ρ‡Π΅ΠΌ ΠΈΠΌ ΠΏΠΎΠ΄ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒΡΡ Π½Π° Π²Π°ΡˆΡƒ рассылку?

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Π°ΠΆΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, ΠΎΡ‚Π½ΠΎΡΡΡ‰ΡƒΡŽΡΡ ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΌΡƒ ΠΏΠΎΡ‚ΠΎΠΊΡƒ. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π΅ ставит своСй Ρ†Π΅Π»ΡŒΡŽ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку новостСй сразу послС ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° Π½Π° Π²Π΅Π±-сайт.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

Π•ΡΡ‚ΡŒ споры ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ содСрТимоС модального ΠΎΠΊΠ½Π° Π² страницу, Π° Π½Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΎΠΊΠ½ΠΎ прСрывания.НСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Π½Π° ΠΊΠ°ΠΊΠΎΠΉ сторонС дискуссии Π²Ρ‹ участвуСтС, ΠΏΠΎΡ…ΠΎΠΆΠ΅, модальноС ΠΎΠΊΠ½ΠΎ Π½ΠΈΠΊΡƒΠ΄Π° Π½Π΅ дСнСтся быстро. Π˜Ρ‚Π°ΠΊ, Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свою ΡΠΎΠ±ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ, слСдуйтС нашим рСкомСндациям, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΡΠ±ΠΈΡ‚ΡŒΡΡ с ΠΏΡƒΡ‚ΠΈ.

Π‘ΠΎΠ»ΡŒΡˆΠΎΠΉ, ΠΆΠΈΡ€Π½Ρ‹ΠΉ UX β€” использованиС ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ для взаимодСйствия с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ

ΠœΠΎΠΆΠ΅Ρ‚Π΅ Π»ΠΈ Π²Ρ‹ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ сСбС ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ ΠΈΠ»ΠΈ Π²Π΅Π±-сайт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΡ€Ρ‚ΠΈΠ»ΠΈΡΡŒ ΠΈΠ·-Π·Π° слишком большого количСства Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… ΠΎΠΊΠΎΠ½? ВрСмя, ΠΊΠΎΠ³Π΄Π° ваш Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ процСсс ΠΈΠ»ΠΈ просмотр страниц Π±Ρ‹Π»ΠΈ ΠΏΡ€Π΅Ρ€Π²Π°Π½Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠΌ Π½Π° полноэкранный Ρ€Π΅ΠΆΠΈΠΌ Π±Π΅Π· Π²Ρ‹Ρ…ΠΎΠ΄Π°? НадоСдливоС ΡƒΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠ΅ просто Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚ Π½Π°ΠΌΠ΅ΠΊΠΎΠ²?

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ.К соТалСнию, Ρ‚Π°ΠΊΠΎΠ΅ ΠΏΠ»ΠΎΡ…ΠΎΠ΅ UX-ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ β€” ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ΅ Π΄Π΅Π»ΠΎ.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΈ способны ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° часто Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΊΠ°ΠΊ быстрыС исправлСния всСго, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ Π²ΠΎΠ²Π»Π΅Ρ‡Π΅Π½Π½ΠΎΡΡ‚ΡŒ.

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Π²Ρ‹Π΄Π΅Π»ΡΡŽΡ‚ΡΡ ΠΆΠΈΡ€Π½Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ, ΠΈ ΠΏΡ€ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΌ использовании ΠΎΠ½ΠΈ ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ способом доставки сообщСний, Π·Π°ΡΠ»ΡƒΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΡ… ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ внимания ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. МногиС ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ β€” Google, Grammarly, HubSpot, Spotify ΠΈ Ρ‚. Π”. β€” ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΈΡ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΈ ΠΏΠΎΠ΄Ρ‚ΠΎΠ»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΈΡ… ΠΊ высокоэффСктивным дСйствиям.

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΎΠΊΠ½ΠΎΠΌ ΠΈ ΠΊΠ°ΠΊ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот шаблон ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ вашСго UX ΠΈ привлСчСния (Π½Π΅ раздраТСния) Π²Π°ΡˆΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ модальноС ΠΎΠΊΠ½ΠΎ?

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° (Ρ‚Π°ΠΊΠΆΠ΅ извСстныС ΠΊΠ°ΠΊ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π°, налоТСния ΠΈ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΈ) β€” это большиС элСмСнты ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ ΠΏΠΎΠ²Π΅Ρ€Ρ… Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° прилоТСния β€” часто со слоСм прозрачности ΠΏΠΎΠ·Π°Π΄ΠΈ Π½ΠΈΡ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³Π»ΠΈ Π·Π°Π³Π»ΡΠ½ΡƒΡ‚ΡŒ Π² Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.

Π§Ρ‚ΠΎΠ±Ρ‹ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ ΠΊ основному интСрфСйсу прилоТСния, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ слоСм. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΈ ΠΏΠΎ своСй ΠΏΡ€ΠΈΡ€ΠΎΠ΄Π΅ ΠΈ ΠΏΡ€Π΅Π΄Π½Π°ΠΌΠ΅Ρ€Π΅Π½Π½ΠΎ Ρ€Π°Π·Ρ€ΡƒΡˆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹, ΠΈΡ… нСльзя ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ лСгкомыслСнно.

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° ΠΈ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ использования ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹Ρ… объявлСний ΠΈ Π²Π°ΠΆΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ привСтствСнных сообщСний ΠΈΠ»ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ нСльзя ΠΏΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ.ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΈ Π½Π΅ привязаны ΠΊ ΠΊΠ°ΠΊΠΎΠΌΡƒ-Π»ΠΈΠ±ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΌΡƒ элСмСнту, ΠΎΠ½ΠΈ, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π»ΡƒΡ‡ΡˆΠ΅ подходят для ΡˆΠΈΡ€ΠΎΠΊΠΈΡ… сообщСний Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, Ρ‡Π΅ΠΌ для контСкстной справки.

Π’ΠΎΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ распространСнныС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ использования:

1. ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ

МодальноС ΠΎΠΊΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΊΠ°ΠΊ Ρ€Π°Π· Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для простого привСтствСнного сообщСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Ρ‚Π΅ΠΏΠ»ΠΎ привСтствуСт Π½ΠΎΠ²Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

Zapier добавляСт Ρ€Π°Π΄ΠΎΡΡ‚ΡŒ Π² ΠΈΡ… привСтствСнноС сообщСниС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ„Π΅Ρ‚Ρ‚ΠΈ.

Если Π²Π°ΠΌ Π΅ΡΡ‚ΡŒ Ρ‡Ρ‚ΠΎ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΏΠΎΡ‚ΠΎΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΡΡ‚Π°Ρ‚ΡŒ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ способом ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π½ΠΎΠ²Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΊ Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρƒ.Π˜Π½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ прогрСсса ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ ΠΌΠΎΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΏΡ€ΠΎΠΉΡ‚ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΡΡ‚Π°ΠΏΠ½ΡƒΡŽ Π°Π΄Π°ΠΏΡ‚Π°Ρ†ΠΈΡŽ ΠΈΠ»ΠΈ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠ»Π΅Π½ΠΈΠ΅ с ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°ΠΌΠΈ.

Grammarly ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΡΠ΅Ρ€ΠΈΡŽ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒ Π½ΠΎΠ²Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ с Π²Π°ΠΆΠ½Ρ‹ΠΌΠΈ функциями, повторяя ΠΏΡ€ΠΈ этом основныС цСнностныС прСдлоТСния ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°.

2. Анонсы Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ

ΠšΡ€ΡƒΠΏΠ½Ρ‹Π΅ анонсы β€” Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Ρ€Π΅Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° ΠΈΠ»ΠΈ выпуск Π΄ΠΎΠ»Π³ΠΎΠΆΠ΄Π°Π½Π½ΠΎΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ β€” часто Π·Π°ΡΠ»ΡƒΠΆΠΈΠ²Π°ΡŽΡ‚ большого модального всплСска.

Calendly использовал простоС модальноС ΠΎΠΊΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±ΡŠΡΠ²ΠΈΡ‚ΡŒ ΠΎ Π½ΠΎΠ²ΠΎΠΉ Π·Π°Ρ…Π²Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ (автоматичСскиС ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ элСктронныС письма).

3. Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π²Π²ΠΎΠ΄ Π΄Π°Π½Π½Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для сообщСний ΠΎΠ± успСхС, Π²Π°ΠΆΠ½Ρ‹Ρ… ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠΉ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π²Π΅Ρ‰Π΅ΠΉ, Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰ΠΈΡ… Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Π²ΠΎΠ΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Π±ΡƒΠ΄ΡŒ Ρ‚ΠΎ Ρ„ΠΎΡ€ΠΌΠ° ΠΈΠ»ΠΈ ΠΏΠΎΠ΄Ρ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΈΠΌ Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠΌ. Π­Ρ‚ΠΈ ΠΈΠ½Ρ†ΠΈΠ΄Π΅Π½Ρ‚Ρ‹ стоит ΠΏΡ€Π΅Ρ€Π²Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ процСсс, Ссли ΠΎΠ½ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ Π²Π°ΠΆΠ½Ρ‹Π΅ послСдствия β€” Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠ΅ Ρ‡Π΅Π³ΠΎ-Π»ΠΈΠ±ΠΎ, сохранСниС прогрСсса, ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠΊΡƒΠΏΠΊΠΈ ΠΈ Ρ‚. Π”.

InVision ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ модальноС ΠΎΠΊΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… дСйствий ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΏΠ΅Ρ€Π΅Π΄ ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°. Π­Ρ‚ΠΎ Π²Π°ΠΆΠ½ΠΎΠ΅ дСйствиС, ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°ΡŽΡ‰ΠΈΠΉ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ шаблон ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΏΠΎΠ»Π΅Π·Π΅Π½ для прСдотвращСния случайного удалСния Π΄Π°Π½Π½Ρ‹Ρ….

НСкоторыС ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‚ вСсь экран ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, блокируя Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ вашСго прилоТСния ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ сосрСдотачивая Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π½Π° сообщСнии ΠΈ взаимодСйствии с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ ΠΏΠ΅Ρ€Π΅Π΄ Π½ΠΈΠΌ. ΠœΡ‹ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌ этот шаблон Π·Π°Ρ…Π²Π°Ρ‚ΠΎΠΌ полноэкранного Ρ€Π΅ΠΆΠΈΠΌΠ°. ОсобСнно Π½Π° Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°Ρ… этот шаблон ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π»ΡƒΡ‡ΡˆΠ΅ всСго Π·Π°Ρ€Π΅Π·Π΅Ρ€Π²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ для критичСски Π²Π°ΠΆΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΈΠ»ΠΈ ΠΊΠΎΠ³Π΄Π° Π΅ΡΡ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ Π²Ρ…ΠΎΠ΄Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΎΠ½ смоТСт Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ дСйствиС.

НСдостатки

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΏΠΎ своСй сути Ρ€Π°Π·Ρ€ΡƒΡˆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹.

Для Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… объявлСний ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°ΠΉΡ‚Π΅ΡΡŒ Π±ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΠ½ΠΊΠΈΡ… шаблонов ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса. Π’Ρ‹Π΄Π²ΠΈΠΆΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΈ Π±Π°Π½Π½Π΅Ρ€Ρ‹ часто Π±ΠΎΠ»Π΅Π΅ подходят для прСдоставлСния ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎΠΉ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΉ связи ΠΈΠ»ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… объявлСний (ΠΊΠ°ΠΊ это Π΄Π΅Π»Π°Π΅Ρ‚ Datadog Π² ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅).

Для контСкстных сообщСний, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ относятся ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ элСмСнтам ΠΈΠ»ΠΈ функциям страницы (ΠΊΠ°ΠΊ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈΠ· HubSpot Π½ΠΈΠΆΠ΅), подсказки часто ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π»ΡƒΡ‡ΡˆΠΈΠΌ Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ.

Когда Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅ΠΊΡΡ‚Π½ΡƒΡŽ ΠΏΠΎΠΌΠΎΡ‰ΡŒ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²ΠΎ врСмя ознакомлСния с ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠΌ), Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°ΡŽΡ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡƒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΌΡƒ элСмСнту Π½Π° страницС ΠΈΠ»ΠΈ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Ρ‡Π΅Ρ€Π΅Π· дСйствия, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€Π΅Π΄ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ Π² Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ всС ΠΎ малСнькой, Π½ΠΎ ΠΌΠΎΡ‰Π½ΠΎΠΉ подсказкС здСсь.

Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΏΠΎ созданию ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ модального Π΄ΠΈΠ·Π°ΠΉΠ½Π°

Π˜Ρ‚Π°ΠΊ, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅, ΠΊΠΎΠ³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ модальноС ΠΎΠΊΠ½ΠΎ β€” Π° ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ Π»ΡƒΡ‡ΡˆΠ΅ с мСньшим шаблоном ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, β€” стоит ΠΏΠΎΠ±Π»ΠΈΠΆΠ΅ Π²Π·Π³Π»ΡΠ½ΡƒΡ‚ΡŒ Π½Π° Ρ‚ΠΎ, ΠΊΠ°ΠΊ Π½Π° самом Π΄Π΅Π»Π΅ выглядит Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½.

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π½Π΅ сущСствуСт ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ шаблона, Π½ΠΎ Π΅ΡΡ‚ΡŒ нСсколько практичСских ΠΏΡ€Π°Π²ΠΈΠ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ стоит Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ. Π”Π°Π²Π°ΠΉΡ‚Π΅ разбСрСмся:

πŸ’― Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ с ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ взгляда Ρ€Π°ΡΡΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ, Ρ‡Ρ‚ΠΎ это Π·Π° модальноС ΠΎΠΊΠ½ΠΎ.

  • Для ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ Π°Π΄Π°ΠΏΡ‚Π°Ρ†ΠΈΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π½Π°Ρ‡Π½ΠΈΡ‚Π΅ с повторСния Β«Π”ΠΎΠ±Ρ€ΠΎ ΠΏΠΎΠΆΠ°Π»ΠΎΠ²Π°Ρ‚ΡŒ Π² {ваш ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚}Β» ΠΈΠ»ΠΈ Β«Π”ΠΎΠ±Ρ€ΠΎ ΠΏΠΎΠΆΠ°Π»ΠΎΠ²Π°Ρ‚ΡŒ, {имя}Β».
  • Π’ ΠΎΠ±ΡŠΡΠ²Π»Π΅Π½ΠΈΡΡ… ΠΎ функциях ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ‚Π°ΠΊΠΈΠ΅ слова, ΠΊΠ°ΠΊ Β«ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΠ΅ΠΌΒ» ΠΈΠ»ΠΈ «НовоС», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.
  • ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° подтвСрТдСния Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Ρ‡Π΅Ρ‚ΠΊΠΎ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌΠΎΠ΅ дСйствиС. НапримСр: Β«Π£Π΄Π°Π»ΠΈΡ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ?Β»

πŸ–Ό Π“Ρ€Π°Ρ„ΠΈΠΊΠ°

Одно ΠΈΠ· самых Π±ΠΎΠ»ΡŒΡˆΠΈΡ… прСимущСств ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с ΡƒΠ·ΠΎΡ€Π°ΠΌΠΈ мСньшСго Ρ€Π°Π·ΠΌΠ΅Ρ€Π° состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π»Π΅Π³ΠΊΠΎ Π²ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ‹ ΠΏΠΎΠ΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ ΠΈΠ»ΠΈ Π² качСствС Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ изобраТСния для Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Π°ΠΊΡ†Π΅Π½Ρ‚Π°. ΠšΠΎΡ€ΠΎΡ‚ΠΊΠΈΠ΅ Π²ΠΈΠ΄Π΅ΠΎΡ€ΠΎΠ»ΠΈΠΊΠΈ ΠΈΠ»ΠΈ GIF-Ρ„Π°ΠΉΠ»Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ функция, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ чСловСчности ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡŽΠΌΠΎΡ€Π°.

πŸ“ Основной тСкст

Основной тСкст ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΡΡ‚ΠΎΡΡ‚ΡŒ ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΡ… Π°Π±Π·Π°Ρ†Π΅Π² ΠΈΠ»ΠΈ ΡΠΎΡΡ‚ΠΎΡΡ‚ΡŒ ΠΈΠ· прСдлоТСния. Как ΠΈ Π² любом UX-письмС, Π±ΡƒΠ΄ΡŒΡ‚Π΅ ясны ΠΈ Π»Π°ΠΊΠΎΠ½ΠΈΡ‡Π½Ρ‹.

πŸƒ Кнопка ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ

Π―Ρ€ΠΊΠΈΠΉ, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π½Π° дСйствия язык Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для CTA. ΠŸΡ€ΠΈΠ·Ρ‹Π²Ρ‹ ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ½Ρ‚Ρ€ΠΈΠ³ΡƒΡŽΡ‰ΠΈΠΌΠΈ, Π½ΠΎ Π½Π΅ слишком Π·Π°Π³Π°Π΄ΠΎΡ‡Π½Ρ‹ΠΌΠΈ.Π›ΡƒΡ‡ΡˆΠΈΠ΅ ΠΈΠ· Π½ΠΈΡ… ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π°ΠΌΠ΅ΠΊΠ°ΡŽΡ‚ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ дальшС.

Для вдохновСния ΠΏΡ€ΠΎΡ‡Ρ‚ΠΈΡ‚Π΅, ΠΊΠ°ΠΊΠΈΠ΅ ΡΠΈΠ»ΡŒΠ½Ρ‹Π΅ слова находят ΠΎΡ‚ΠΊΠ»ΠΈΠΊ Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

πŸ™… Π’Ρ‹Ρ…ΠΎΠ΄Ρ‹

НС Π΄Π΅Ρ€ΠΆΠΈΡ‚Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π² Π·Π°Π»ΠΎΠΆΠ½ΠΈΠΊΠ°Ρ…. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠΊΠΈΠ½ΡƒΡ‚ΡŒ модальноС ΠΎΠΊΠ½ΠΎ ΠΈ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ ΠΊ Π²Π°ΡˆΠ΅ΠΌΡƒ основному ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡŽ.

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΌΠΎΠ³ΡƒΡ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«XΒ», Ρ‚Π°ΠΊ ΠΈ CTA для Π²Ρ‹Ρ…ΠΎΠ΄Π°. Π˜Ρ… Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°Π»ΠΈΡΡŒ, Ссли ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π²Ρ‹ΠΉΠ΄Π΅Ρ‚ ΠΈΠ· модального ΠΎΠΊΠ½Π°.

⏳ Π˜Π½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ выполнСния

ΠŸΡ€ΠΈ использовании сСрии ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ выполнСния Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ ΠΌΠΎΡ‚ΠΈΠ²Π°Ρ†ΠΈΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΈ ΡΠΎΠΎΠ±Ρ‰Π°Ρ‚ΡŒ ΠΈΠΌ, сколько Π΅Ρ‰Π΅ шагов ΠΎΡΡ‚Π°Π»ΠΎΡΡŒ Π² ΠΏΠΎΡ‚ΠΎΠΊΠ΅.Π’ΠΎΠ½ΠΊΠΈΠ΅ Ρ‚ΠΎΡ‡ΠΊΠΈ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Google), простая Π΄Ρ€ΠΎΠ±ΡŒ ΠΈΠ»ΠΈ классичСская полоса β€” всС это ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ большоС влияниС Π½Π° Ρ‚ΠΎ, Π·Π°Π²Π΅Ρ€ΡˆΠ°ΡŽΡ‚ Π»ΠΈ люди ΠΌΠΎΠ΄Π°Π»ΡŒΠ½ΡƒΡŽ ΡΠ΅Ρ€ΠΈΡŽ.

ВзглянитС Π½Π° модальноС ΠΎΠΊΠ½ΠΎ ΠšΠ°Π»Π΅Π½Π΄Π°Ρ€Ρ Google Π½ΠΈΠΆΠ΅. Π—Π΄Π΅ΡΡŒ Π½Π΅Ρ‚ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° выполнСния, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это ΠΎΠ΄ΠΈΠ½ шаг, Π½ΠΎ ΠΏΡ€ΠΈΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‚ всС ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π³ΠΎ модального ΠΎΠΊΠ½Π°: ΠΎΠΏΠΈΡΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, фирмСнная Π³Ρ€Π°Ρ„ΠΈΠΊΠ°, ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ основной тСкст ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π²Ρ‹ΠΉΡ‚ΠΈ с дСйствиСм ΠΈΠ»ΠΈ Π±Π΅Π· Π½Π΅Π³ΠΎ.

ИспользованиС ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ


ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΌΠΎΡ‰Π½Ρ‹ΠΌ инструмСнтом для взаимодСйствия с ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌΠΈ прилоТСниями.ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ экраны ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠ΅ пространство, Π³Ρ€Π°Π½ΠΈΡ†Π° ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΎΠΊΠ½Π°ΠΌΠΈ, Π²Ρ‹Π΄Π²ΠΈΠΆΠ½Ρ‹ΠΌΠΈ ΠΎΠΊΠ½Π°ΠΌΠΈ ΠΈ Π΄Π°ΠΆΠ΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌΠΈ подсказками ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΡ‹Ρ‚ΡŒΡΡ β€” большая Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°Ρ‡Π°Ρ‚ΡŒ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΊΠ°ΠΊ малСнькая модальная Ρ„ΠΎΡ€ΠΌΠ° Π½Π° Π»Π°Π΄ΠΎΠ½ΠΈ.

Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ΠΌ β€” ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ сообщСниС Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π·Ρ€ΡƒΡˆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах β€” Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ интСрСсныС возмоТности для Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π΅Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΎΠ»ΠΎΠ³ΠΎΠ².

Π₯отя использованиС модального ΠΎΠΊΠ½Π° для ΠΏΠ΅Ρ€Π΅ΠΏΡ€ΠΎΠ΄Π°ΠΆΠΈ подписки Π±ΠΎΠ»Π΅Π΅ высокого уровня ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ агрСссивным Π½Π° Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½ΠΎΠΌ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π΄ΠΎΠΏΡ€ΠΎΠ΄Π°ΠΆΠ° β€” прСкрасный Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ использования для мобильного модального ΠΎΠΊΠ½Π°, Ссли с Π½ΠΈΠΌ ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ с ΡƒΠΌΠΎΠΌ.

Duolingo ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΡΠ΅Ρ€ΠΈΡŽ Π·Π°Π±Π°Π²Π½Ρ‹Ρ… Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ΄Ρ‚ΠΎΠ»ΠΊΠ½ΡƒΡ‚ΡŒ постоянных ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΊ Π΅Π³ΠΎ ΠΏΡ€Π΅ΠΌΠΈΠ°Π»ΡŒΠ½ΠΎΠΌΡƒ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρƒ.

Permission Priming β€” Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ распространСнный Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ использования ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах:

Skyscanner ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ модальноС ΠΎΠΊΠ½ΠΎ с частичным экраном, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ увСдомлСния послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Π·Π°Π²Π΅Ρ€ΡˆΠ°Ρ‚ свой ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ поиск ΠΏΠΎΠ»Π΅Ρ‚Π° Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ.

Π₯ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎΠ± использовании ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½? ΠžΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с этими 8 ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΡ€Π°Π΄ΡƒΡŽΡ‚ ΠΈ Π·Π°ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΡƒΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ вашСго прилоТСния.

Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° для Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰Π΅Π³ΠΎ ΠΎΠ±ΠΌΠ΅Π½Π° сообщСниями

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° бСззастСнчиво Π²Ρ‹Π΄Π΅Π»Π΅Π½Ρ‹ ΠΆΠΈΡ€Π½Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΈΡ… экономно ΠΈ ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ содСрТащиСся Π² Π½ΠΈΡ… сообщСния приносят ΠΏΠΎΠ»ΡŒΠ·Ρƒ, Π° Π½Π΅ Ρ€Π°Π·Π΄Ρ€Π°ΠΆΠ°ΡŽΡ‚ Π²Π°ΡˆΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈ ΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΎΠΊΠ½Π°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ выглядят Π½Π°Ρ‚ΠΈΠ²Π½ΠΎ для вашСго прилоТСния (ΠΈ Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ программирования ΠΈΠ»ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° для Π½Π°Ρ‡Π°Π»Π° Ρ€Π°Π±ΠΎΡ‚Ρ‹), ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Appcues !

МодальноС ΠΈΠ»ΠΈ Π½Π΅Ρ‚. ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° популярны Π½Π΅ зря… | АллСн Ким | Digital-Heart

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° популярны ΠΏΠΎ ΡƒΠ²Π°ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅: ΠΎΠ½ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‚ быстроС, Ρ†Π΅Π»Π΅Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½ΠΎΠ΅, контСкстноС взаимодСйствиС.Когда ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ, Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° страницы Π½Π΅ трСбуСтся, ΠΊΠΎΠ³Π΄Π° ΠΈΠΌ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚ΡŒ ΠΏΠΎΡ‚ΠΎΠΊ Π²ΠΏΠ΅Ρ€Π΅Π΄.

МодальноС ΠΎΠΊΠ½ΠΎ Π²Ρ‹Π½ΡƒΠΆΠ΄Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ это дСйствиС, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ ΠΊ своСму Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΌΡƒ Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌΡƒ процСссу. Π­Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚ ΠΎΠ΄Π½ΠΎ дСйствиС Π·Π° Ρ€Π°Π·, Π° Π½Π΅ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚ нСсколько Π·Π°Π΄Π°Ρ‡ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ с мСньшСй Π²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒΡŽ Π·Π°ΠΏΡƒΡ‚Π°ΡŽΡ‚ΡΡ ΠΈ ΠΏΠΎΡ‚Π΅Ρ€ΡΡŽΡ‚ΡΡ Π² своСм Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ процСссС ΠΈΠ·-Π·Π° наличия ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ управлСния ΠΈ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ. Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Β«Π’Π²Π΅Π΄ΠΈΡ‚Π΅ этот Π½ΠΎΠΌΠ΅Ρ€, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒΒ»

МногиС Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΊΡ€ΠΈΡ‚ΠΈΠΊΡƒΡŽΡ‚ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΏΠΎ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°ΠΌ.ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π½Π΅ Π² ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠ½Π°Ρ…. Π­Ρ‚ΠΎ связано с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π°.

МодальноС Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ внимания ΠΈ доступности

МодальноС Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ 100% экрана, ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ закрывая Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ, Ρ‚Π°ΠΊΠΆΠ΅ скрывая Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π° ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ согласно W3C.

МодальноС Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ настраиваСмым ΠΈ доступным, Π° доступныС описания ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π½Π° основС содСрТимого ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π°. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ role = "dialog" , aria-modal , aria-hidden соотвСтствСнно для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ модального ΠΎΠΊΠ½Π°.

ΠšΡ€ΠΈΡ‚ΠΈΠΊΠ°

БостояниС модального ΠΎΠΊΠ½Π°, ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΠ³ΠΎ Π½Π° страницС, Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ прСдставлСно URL-адрСсом. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΡΠ΅Ρ‰Π°Ρ‚ΡŒ страницу с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΎΠΊΠ½ΠΎΠΌ Π±Π΅Π· Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ программирования.

НЕ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ модальноС ΠΎΠΊΠ½ΠΎ, Ссли ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² модальноС состояниС ΠΏΠΎ URL-адрСсу.

Блишком ΠΌΠ½ΠΎΠ³ΠΎ содСрТимого Π² модальном ΠΎΠΊΠ½Π΅ ΠΈΠ»ΠΈ слишком частоС использованиС ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ² утомляСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ всякий Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° появляСтся модальноС Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΎΠ±Ρ€Π°Ρ‰Π°ΡŽΡ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π΅Π³ΠΎ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ ΠΊ своСму Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΌΡƒ Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌΡƒ процСссу.

НЕ добавляйтС слишком ΠΌΠ½ΠΎΠ³ΠΎ содСрТимого Π² модальноС ΠΎΠΊΠ½ΠΎ.
НЕ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ модальноС ΠΎΠΊΠ½ΠΎ для Π½Π΅Π²Π°ΠΆΠ½ΠΎΠ³ΠΎ содСрТимого. ВмСсто этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, ΠΊΠ°ΠΊ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ эта страница.

Как насчСт нСмодального Π΄ΠΈΠ°Π»ΠΎΠ³Π°?

ΠΠ΅ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Π΅ ΠΎΠΊΠ½Π° , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ Π½Π° экранС ΠΈ доступны для использования Π² любоС врСмя, Π½ΠΎ Ρ€Π°Π·Ρ€Π΅ΡˆΠ°ΡŽΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ дСйствия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. ΠΠ΅ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ°Π»ΠΎΠ³ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ отобраТСния ΠΈΠ»ΠΈ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹ (Π΄ΠΈΠ°Π»ΠΎΠ³ ΡƒΡ‚ΠΈΠ»ΠΈΡ‚Ρ‹ / ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ являСтся ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΌ. Если это Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ внимания ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, нСльзя ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ°Π»ΠΎΠ³.

Π˜Π·Π±Π΅Π³Π°ΠΉΡ‚Π΅ использования нСмодального Π΄ΠΈΠ°Π»ΠΎΠ³Π°, Ссли это Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ. Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΎΠΊΠ½ΠΎ Ρ‡Π°Ρ‚Π°, статус Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ, ΠΈΡΡ‡Π΅Π·Π°ΡŽΡ‰Π΅Π΅ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ сообщСния.

Как насчСт Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ ΠΎΠΊΠ½Π° Π²Π½ΡƒΡ‚Ρ€ΠΈ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ ΠΎΠΊΠ½Π°?

Π― Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π²ΠΈΠ΄Π΅Π» Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΉ ΠΏΠΎ использованию этого ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°. Богласно этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΈ ΠΎΠ±ΡΡƒΠΆΠ΄Π΅Π½ΠΈΡŽ UX, ΠΎΠ½ нСпослСдоватСлСн, Π½Π΅ сфокусирован ΠΈ слишком слоТСн.

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° β€” это ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΈ эффСктивный Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ интСрфСйса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΈΡ… ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ. Помня ΠΎΠ± этом, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ модальноС Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ

  • МодальноС ΠΎΠΊΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΎΠΏΠΈΡΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ
  • МодальноС ΠΎΠΊΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠžΡ‚ΠΌΠ΅Π½Π° / Π—Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ
  • Клавиша Escape Π΄ΠΎΠ»ΠΆΠ½Π° Π·Π°ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΠΊΠ½ΠΎ
  • Π—Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ модального ΠΎΠΊΠ½Π°
  • Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚Π΅Π½ΡŒ ΠΈ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ Ρ„ΠΎΠ½
  • НС создавайтС модальноС ΠΎΠΊΠ½ΠΎ с слишком большим количСством содСрТимого. Π­Ρ‚ΠΎ сбиваСт с Ρ‚ΠΎΠ»ΠΊΡƒ.

Бсылки:

Π”Π°Π»Π΅Π΅ я Ρ‚ΠΎΠ»ΡŒΠΊΠΎ собрал ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρ‹, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π½Π°ΠΌ слСдуСт ΠΈΠ·Π±Π΅Π³Π°Ρ‚ΡŒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½; https://medium.com/@allenhwkim/why-not-modal-84d9f5d7c646

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½

Π˜Π½Ρ‚Π΅Ρ€Π΅ΡΠ½Ρ‹ΠΉ Ρ„Π°ΠΊΡ‚: Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΎΠΊΠ½Π°, с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ Π²Ρ‹ ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°Π΅Ρ‚Π΅ΡΡŒ Π½Π° Π²Π΅Π±-сайтах, ΠΈΠΌΠ΅ΡŽΡ‚ настоящСС имя. Π˜Ρ… Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΎΠΊΠ½Π°ΠΌΠΈ, ΠΈ всС ΡƒΠ²Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ Π·Π½Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ ΠΈ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ способ ΠΈΡ… использования.

ВсС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ ΠΎ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠ½Π°Ρ….

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π°?

Π’Π΅Ρ€ΠΌΠΈΠ½ «модальноС ΠΎΠΊΠ½ΠΎΒ» относится ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡƒ ΠΎΠΊΠ½Ρƒ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΡ€Π΅Ρ€Ρ‹Π²Π°Π΅Ρ‚ дСйствиС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ ΠΏΡ‹Ρ‚Π°Π΅Ρ‚Π΅ΡΡŒ Π·Π°Π²Π΅Ρ€ΡˆΠΈΡ‚ΡŒ.

Когда Π²Ρ‹ просматриваСтС свой Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΉ новостной ΠΈΠ»ΠΈ Ρ€Π°Π·Π²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ сайт, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ с ΠΏΡ€ΠΈΠ³Π»Π°ΡˆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ Π±ΡŽΠ»Π»Π΅Ρ‚Π΅Π½ΡŒ являСтся ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΎΠΊΠ½ΠΎΠΌ. Когда Π²Ρ‹ ΡƒΡ…ΠΎΠ΄ΠΈΡ‚Π΅ с сайта элСктронной ΠΊΠΎΠΌΠΌΠ΅Ρ€Ρ†ΠΈΠΈ, Π° Ρ‚ΠΎΠ²Π°Ρ€Ρ‹ всС Π΅Ρ‰Π΅ находятся Π² ΠΊΠΎΡ€Π·ΠΈΠ½Π΅, ΠΎΠΊΠ½ΠΎ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ сообщаСт, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΡƒΡ…ΠΎΠ΄ΠΈΡ‚Π΅, Π½Π΅ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΠ² ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΡƒ, являСтся ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΎΠΊΠ½ΠΎΠΌ. Когда Π²Ρ‹ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ ΠΈΠ· Π²Π΅Π±-сайта слуТбы, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ с Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Π½ΠΈΠ΅ΠΌ ΠΎ нСобходимости ΠΏΠΎΠ·Π²ΠΎΠ½ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ элСктронноС письмо Π² компанию являСтся ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΎΠΊΠ½ΠΎΠΌ.

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° β€” это Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠΊΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ΡΠΊΠ°ΠΊΠΈΠ²Π°ΡŽΡ‚ ΠΈΠ· Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚Π΅ Π½Π° Π²ΠΈΠ΄Π΅ΠΎ ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ Π»ΡƒΡ‡ΡˆΠ΅ Π΅Π³ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ. Π­Ρ‚ΠΎ ΠΎΠΊΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‚, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΏΡ‹Ρ‚Π°Π΅Ρ‚Π΅ΡΡŒ Π²Ρ‹ΠΉΡ‚ΠΈ ΠΈΠ· ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ Π±Π΅Π· сохранСния вашСй Ρ€Π°Π±ΠΎΡ‚Ρ‹. Π­Ρ‚ΠΎ ΠΎΠΊΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ Π² вашСй ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ ΠΏΠΎΠ΄Π°Ρ‡ΠΈ Π½Π°Π»ΠΎΠ³ΠΎΠ²Ρ‹Ρ… Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ†ΠΈΠΉ ΠΈ ΡΠΏΡ€Π°ΡˆΠΈΠ²Π°ΡŽΡ‚ вас, измСнилась Π»ΠΈ какая-Π»ΠΈΠ±ΠΎ информация ΠΈΠ»ΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π»ΠΈ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ваш адрСс ΠΈ дСмографичСскиС Π΄Π°Π½Π½Ρ‹Π΅ ΠΈΠ· ΠΏΡ€ΠΎΡˆΠ»ΠΎΠ³ΠΎΠ΄Π½Π΅ΠΉ Π½Π°Π»ΠΎΠ³ΠΎΠ²ΠΎΠΉ Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ†ΠΈΠΈ.

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ситуациях ΠΈ Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ способами для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ взаимодСйствия с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ.

ΠΠ΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ способ использования ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½.

Какими Π±Ρ‹ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌΠΈ Π½ΠΈ Π±Ρ‹Π»ΠΈ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° для Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π΅Π² бизнСса ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² Π²Π΅Π±-сайтов, Π²Π°ΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ ΠΎ Π½ΠΈΡ… ΠΊΠΎΠ΅-Ρ‡Ρ‚ΠΎ.

1. Они ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°ΡΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

Блишком ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ ΠΈΠ»ΠΈ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ Π½Π΅ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ, ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°ΡΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ посСтитСлСй вашСго сайта. МногиС люди Π·Π°Ρ€Π°Π½Π΅Π΅ Π·Π°ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΆΠ°Ρ‚ΡŒ Β«ΠžΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒΒ» ΠΈΠ»ΠΈ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΎΠΊΠ½ΠΎ, Π½Π΅ читая ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, особСнно Ссли ΠΎΠ½ΠΈ ΡƒΠΆΠ΅ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Π»ΠΈΡΡŒ с Π½ΠΈΠΌΠΈ Π½Π° вашСм Π²Π΅Π±-сайтС Ρ€Π°Π½ΡŒΡˆΠ΅ ΠΈ Π΄ΡƒΠΌΠ°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ Π·Π½Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ говорят.

2. Они ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π·Π°Π±Ρ‹Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π΄Π΅Π»Π°Π»ΠΈ Π΄ΠΎ появлСния ΠΎΠΊΠ½Π°.

Π­Ρ‚ΠΎ Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π° ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π²Π°ΠΌ слСдуСт экономно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π°. ИсслСдования ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ сбои, Π²Ρ‹Π·Π²Π°Π½Π½Ρ‹Π΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ ΠΎΠΊΠ½ΠΎΠΌ, ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΊΠΎΠ³Π½ΠΈΡ‚ΠΈΠ²Π½ΡƒΡŽ Π½Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π·Π°Π±Ρ‹Π²Π°ΡŽΡ‚, ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΎΠ½ΠΈ оказались Π½Π° этой страницС.

3. Они ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°ΠΏΡƒΡ‚Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

Если вашС модальноС ΠΎΠΊΠ½ΠΎ Π½Π΅ соотвСтствуСт Π±Ρ€Π΅Π½Π΄Ρƒ вашСго Π²Π΅Π±-сайта ΠΈ ΠΏΠΎΡ…ΠΎΠΆΠ΅, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ Π½Π΅ ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ‚ ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ части вашСй страницы, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ склонны Π΄ΡƒΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ это спам ΠΈΠ»ΠΈ вирус, прСдлагая ΠΈΠΌ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ модальноС ΠΎΠΊΠ½ΠΎ ΠΈ ваш сайт, тСряя Π΄ΠΎΠ²Π΅Ρ€ΠΈΠ΅ ΠΊ Π²Π°ΡˆΠ΅ΠΌΡƒ бизнСсу.


По Ρ‚Π΅ΠΌΠ΅: Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ лайтбокс?


Как ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π°.

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ нСвСроятно ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ для вас И посСтитСлСй вашСго Π²Π΅Π±-сайта, Ссли ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ способами, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½Ρ‹ΠΌΠΈ для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ взаимодСйствия с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ. НапримСр:

1. ΠŸΡ€ΠΈΠ²Π»Π΅Ρ‡Π΅Π½ΠΈΠ΅ внимания ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

ΠŸΡ€ΠΈΠ²Π»Π΅Ρ‡Π΅Π½ΠΈΠ΅ внимания ΠΊ Ρ‚ΠΎΠΌΡƒ Ρ„Π°ΠΊΡ‚Ρƒ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ запросил Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ дСйствия, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ смысла, β€” ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ способ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π°.ΠšΡ‚ΠΎ случайно Π½Π΅ Π·Π°ΠΊΡ€Ρ‹Π» Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ с Ρ‚ΠΎΠ²Π°Ρ€ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ Π”Π•Π™Π‘Π’Π’Π˜Π’Π•Π›Π¬ΠΠž Ρ…ΠΎΡ‚Π΅Π»ΠΈ ΠΏΡ€ΠΎΠ΄Π°Ρ‚ΡŒ, ΠΈΠ»ΠΈ Π½Π΅ Π·Π°ΠΊΡ€Ρ‹Π» ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π±Ρ‹Π»ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ часов нСсохранСнной Ρ€Π°Π±ΠΎΡ‚Ρ‹? ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для привлСчСния внимания ΠΊ дСйствиям, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ каТутся Π½Π΅Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΌΠΈ ΠΈΠ·-Π·Π° дСйствий ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.


Бонус: ΠΊΠ°ΠΊ JavaScript ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅


2. ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° для сбора ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΡ… Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½Ρ‹, ΠΊΠ°ΠΊ ΠΈ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ для сбора ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ для Π²Ρ…ΠΎΠ΄Π° Π² систСму.Они ΠΌΠΎΠ³ΡƒΡ‚ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ Ρ†Π΅Π½Π½ΠΎΠ΅ пространство Π½Π° Π²Π΅Π±-страницС ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

Однако это Π½Π΅Π²Π΅Ρ€Π½ΠΎ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… Π²Π΅Π±-сайтов, Π³Π΄Π΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Π°Ρ страница Π²Ρ…ΠΎΠ΄Π°, вСроятно, являСтся подходящим Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Ρ‚Ρ€ΡƒΠ΄Π½Ρ‹ΠΌΠΈ для Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π½Π° мобильном устройствС.

3. Π£ΠΏΡ€ΠΎΡ‰Π΅Π½ΠΈΠ΅ взаимодСйствия с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ.

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎΡ‚ Π²Π°ΡˆΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, которая ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ процСсс, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ Π΄ΠΎΠ»Π³ΠΈΠΌ. НапримСр, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ модальноС ΠΎΠΊΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ нСбольшой опрос, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π°ΠΏΡ€Π°Π²ΠΈΡ‚ Π²Π°ΡˆΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΊ Ρ‚ΠΎΠΌΡƒ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρƒ ΠΈΠ»ΠΈ услугС, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠΌ Π½ΡƒΠΆΠ΅Π½.Или Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ модальноС ΠΎΠΊΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΏΡ€ΠΎΡΠΈΡ‚ΡŒ, хотят Π»ΠΈ ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΎΠ½ΠΈ сохранили Π² вашСй систСмС Ρ€Π°Π½Π΅Π΅, ΠΏΡ€ΠΈ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ Ρ„ΠΎΡ€ΠΌΡ‹.


ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡ‚Π΅ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ: Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ отступы Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅?


ПослСднСС слово.

Как ΠΈ всС Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌΠΈ инструмСнтами, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠ»ΡƒΡ‡ΡˆΠ°ΡŽΡ‚ взаимодСйствиС с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ ΠΏΡ€ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΌ использовании. ΠŸΡ€ΠΈ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΌ использовании ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°ΡΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π²Π°ΡˆΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΈ ΠΏΠΎΠ΄Ρ‚ΠΎΠ»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΈΡ… ΠΊ вашСй ΠΊΠΎΠ½ΠΊΡƒΡ€Π΅Π½Ρ†ΠΈΠΈ. Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ слСдуСтС Π»ΡƒΡ‡ΡˆΠΈΠΌ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ°ΠΌ ΠΏΡ€ΠΈ встраивании ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ Π² свой Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΈ Π²Ρ‹ Π½Π΅ ΠΏΠΎΠΆΠ°Π»Π΅Π΅Ρ‚Π΅.

–

Thrive Design β€” это ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ агСнтство Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³Π° ΠΈΠ· Биэтла. Π‘Π²ΡΠΆΠΈΡ‚Π΅ΡΡŒ с Π½Π°ΠΌΠΈ сСгодня, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ ваш бизнСс Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅! НайдитС нас Π² Clutch, UpCity, LinkedIn, Facebook ΠΈ Twitter.

ΠšΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΡ: Π’Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ Биэтл

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° | AcceDe Web

Π‘Π²ΠΎΠ΄ΠΊΠ°

ΠŸΡ€ΠΈΠ½Ρ†ΠΈΠΏ

МодальноС ΠΎΠΊΠ½ΠΎ появляСтся Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ ΠΎΠΊΠ½Π° ΠΈ отобраТаСтся Π½Π°Π΄ страницСй, которая Π΅Π³ΠΎ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚.

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΡƒΡŽΡ‚ Ρ‚Π΅ΠΊΡƒΡ‰ΡƒΡŽ страницу, ΠΏΠΎΠΊΠ° ΠΎΠ½ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π½Π° экранС.

Π‘Π°Π·ΠΎΠ²Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄

МодальноС окно

с Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ , ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹ΠΌ Π½Π° экранС
  

[ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ]

[МодальноС содСрТаниС]

МодальноС окно

Π±Π΅Π· Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° , ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΠΎΠ³ΠΎ Π½Π° экранС
  
[МодальноС содСрТаниС]

Π ΠΎΠ»ΠΈ, состояния ΠΈ свойства ARIA

  • role = "dialog" Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ ΠΊ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρƒ Π² модальном ΠΎΠΊΠ½Π΅
  • aria-modal = "true" Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρƒ Π² модальном ΠΎΠΊΠ½Π΅
  • Если Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ модального ΠΎΠΊΠ½Π° отобраТаСтся Π½Π° экранС, ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½ ΠΊ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½ΠΎΠΌΡƒ ΠΎΠΊΠ½Ρƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° aria-labelledby :
    • Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ модального ΠΎΠΊΠ½Π° Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ id с ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ.
    • ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ модального ΠΎΠΊΠ½Π° Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ aria-labelledby со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° id Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° модального ΠΎΠΊΠ½Π°.
  • Если Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ модального ΠΎΠΊΠ½Π° Π½Π΅ отобраТаСтся Π½Π° экранС, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ aria-label ΠΈ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅ модального ΠΎΠΊΠ½Π°.

ВзаимодСйствиС с ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€ΠΎΠΉ

Выступ

Когда отобраТаСтся модальноС ΠΎΠΊΠ½ΠΎ, эта клавиша ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ фокус ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ Ρ‡Π΅Ρ€Π΅Π· ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ элСмСнты Π² модальном ΠΎΠΊΠ½Π΅.Если фокус находится Π½Π° послСднСм ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΌ элСмСнтС Π² модальном ΠΎΠΊΠ½Π΅, ΠΊΠΎΠ³Π΄Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ° Π½Π°ΠΆΠ°Ρ‚Π°, фокус ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ пСрСмСщаСтся Π½Π° ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ элСмСнт Π² модальном ΠΎΠΊΠ½Π΅.

Shift + Tab

Π­Ρ‚Π° комбинация клавиш дСйствуСт Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ клавиша Tab , Π½ΠΎ Π² ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΌ порядкС. Если ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΈ клавиш фокус ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ находится Π½Π° ΠΏΠ΅Ρ€Π²ΠΎΠΌ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΌ элСмСнтС Π² модальном ΠΎΠΊΠ½Π΅, фокус пСрСмСщаСтся Π½Π° послСдний ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ элСмСнт Π² модальном ΠΎΠΊΠ½Π΅.

Esc

Когда отобраТаСтся модальноС ΠΎΠΊΠ½ΠΎ, ΠΎΠ½ΠΎ закрываСтся, ΠΈ фокус ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ помСщаСтся Π½Π° ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ запустил модальноС ΠΎΠΊΠ½ΠΎ.

ОТидаСмоС повСдСниС

Когда отобраТаСтся модальноС ΠΎΠΊΠ½ΠΎ (ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎ)

  • Ѐокус ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ динамичСски помСщаСтся Π½Π° ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ элСмСнт, содСрТащийся Π² модальном ΠΎΠΊΠ½Π΅.
  • Ѐокус ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΎΠΊΠ½ΠΎΠΌ, Π° табуляция Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Π° Π½Π° ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ части страницы (ΠΏΠΎΠ΄ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΎΠΊΠ½ΠΎΠΌ).МодальноС ΠΎΠΊΠ½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ клавиши Esc .

Когда модальноС ΠΎΠΊΠ½ΠΎ скрыто (Π·Π°ΠΊΡ€Ρ‹Ρ‚ΠΎ)

  • Ѐокус ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π½Π° элСмСнт, ΠΎΡ‚ΠΊΡ€Ρ‹Π²ΡˆΠΈΠΉ ΠΏΡ€ΠΎΠ΅ΠΌ модального ΠΎΠΊΠ½Π°.
  • Π’ ΠΈΠ΄Π΅Π°Π»Π΅ модальноС ΠΎΠΊΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ΄Π°Π»Π΅Π½ΠΎ ΠΈΠ· DOM. Однако, Ссли модальноС ΠΎΠΊΠ½ΠΎ остаСтся Π² исходном ΠΊΠΎΠ΄Π΅, ΠΊ Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρƒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ display: none ΠΈΠ»ΠΈ visibility: hidden .

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

Π­Ρ‚ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ модального ΠΎΠΊΠ½Π° ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ΡΡ здСсь, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΈΡ… ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ доступности считаСтся Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ ΠΈΠ»ΠΈ ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ.

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *