{"draftJsState":{"blocks":[{"data":{"image":{"id":"6313113894cd965a6f8bd878"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9thq9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Учимся делать веб-сайты с нуля до трудоустройства. Разбираемся, как делать дизайн и верстку. Сегодня разберемся, как делать диалоговые окна, работать с кнопками и формами.","type":"unstyled","key":"1c6nn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":120,"offset":0,"style":"BOLD"}],"text":"Те, кто хочет индивидуальное обучение с преподавателем и быстрое гарантированное трудоустройство, пишите нам в телеграм:","type":"unstyled","key":"3n9jk"},{"data":{"embedData":{"type":"external","host":"t.me","image":{"id":"6313d4af908abf1aca35a76e","namespace":"zen_brief_embed","url_template":"https://avatars.dzeninfra.ru/get-zen_brief_embed/5282550/pub_631289a76ccd6621e2836e8d_6313d4af908abf1aca35a76e/{size}","meta":{"main_color":"#28A0E0"},"size":{"width":128,"height":128},"width":128,"height":128,"link":"https://avatars.dzeninfra.ru/get-zen_brief_embed/5282550/pub_631289a76ccd6621e2836e8d_6313d4af908abf1aca35a76e/smart_crop_156x156","src":"https://avatars.dzeninfra.ru/get-zen_brief_embed/5282550/pub_631289a76ccd6621e2836e8d_6313d4af908abf1aca35a76e/smart_crop_156x156","main_color":"#28A0E0","mainColor":"#28A0E0"},"src":"https://t.me/srmt22","title":"Sarmatia 22"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"92lsc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что было на прошлом занятии?","type":"header-two","key":"18g1t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы научились делать адаптивную верстку. Сделали так, чтобы сайт работал везде. ","type":"unstyled","key":"a5h1i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот ссылка на архив с результатами прошлого урока:","type":"unstyled","key":"1g0hg"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":63,"offset":0}],"inlineStyleRanges":[],"text":"https://github.com/madmaker/srmt-lsn11/archive/refs/tags/v1.zip","type":"unstyled","key":"2g680"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Скачайте себе этот архив, распакуйте и откройте в vsCode. На его основе мы будем делать этот урок.","type":"unstyled","key":"dlmg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что будет на этом уроке?","type":"header-two","key":"3ku3s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На этом уроке мы научимся делать:","type":"unstyled","key":"d7l7p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Диалоговые окна","type":"unordered-list-item","key":"a60ph"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Контактные формы","type":"unordered-list-item","key":"4nfvr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если в процессе изучения что-то не понятно - не стесняйтесь спрашивать нас и других учеников в нашей открытой группе в телеграм:","type":"unstyled","key":"o07e"},{"data":{"embedData":{"type":"external","host":"t.me","image":{"id":"63128aabe35dd24f70223e66","namespace":"zen_brief_embed","url_template":"https://avatars.dzeninfra.ru/get-zen_brief_embed/5612950/pub_631289a76ccd6621e2836e8d_63128aabe35dd24f70223e66/{size}","meta":{"main_color":"#28A0E0"},"size":{"width":128,"height":128},"width":128,"height":128,"link":"https://avatars.dzeninfra.ru/get-zen_brief_embed/5612950/pub_631289a76ccd6621e2836e8d_63128aabe35dd24f70223e66/smart_crop_156x156","src":"https://avatars.dzeninfra.ru/get-zen_brief_embed/5612950/pub_631289a76ccd6621e2836e8d_63128aabe35dd24f70223e66/smart_crop_156x156","main_color":"#28A0E0","mainColor":"#28A0E0"},"src":"https://t.me/srmt22_webclub","title":"SRMT22 Открытый клуб веб-разработки"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"9q8nu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для тех, кто только к нам присоединился, ссылка на все уроки:","type":"unstyled","key":"843k3"},{"data":{"embedData":{"type":"external","host":"zen.yandex.ru","image":{"id":"63128abc6bb2b75d87d9933f","namespace":"zen_brief_embed","url_template":"https://avatars.dzeninfra.ru/get-zen_brief_embed/5282245/pub_631289a76ccd6621e2836e8d_63128abc6bb2b75d87d9933f/{size}","meta":{"main_color":"#F8C800"},"size":{"width":360,"height":360},"width":156,"height":156,"link":"https://avatars.dzeninfra.ru/get-zen_brief_embed/5282245/pub_631289a76ccd6621e2836e8d_63128abc6bb2b75d87d9933f/smart_crop_156x156","src":"https://avatars.dzeninfra.ru/get-zen_brief_embed/5282245/pub_631289a76ccd6621e2836e8d_63128abc6bb2b75d87d9933f/smart_crop_156x156","main_color":"#F8C800","mainColor":"#F8C800"},"src":"https://zen.yandex.ru/srmt22_webclasses","title":"Обучение веб-программированию с нуля бесплатно"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"c9bhh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И ссылка на самый первый урок:","type":"unstyled","key":"3cots"},{"data":{"embedData":{"type":"yandex-zen-publication","publicationId":"62d577ce6a8de461fac89852","originalUrl":"https://zen.yandex.ru/media/id/62d57767cc38491671976547/62d577ce6a8de461fac89852","publisherId":"62d57767cc38491671976547","publisherName":"Обучение веб-программированию с нуля бесплатно","title":"Вводный курс в веб-программирование. Урок 1.","publishTime":1658160584738,"isPublisherVerified":false,"image":{"id":"62d583b2996e500f073a2ede","groupId":5174875,"imageName":"pub_62d577ce6a8de461fac89852_62d583b2996e500f073a2ede","namespace":"zen_doc","meta":{"mainColor":"#282830","origFormat":"PNG"},"sizes":{"orig":{"width":2542,"height":1804},"scale_360":{"width":360,"height":255},"scale_540":{"width":540,"height":383},"scale_600":{"width":600,"height":426},"scale_720":{"width":720,"height":511},"scale_1200":{"width":1200,"height":852},"scale_2400":{"width":2400,"height":1703}}},"badSeoLink":"true"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"anda2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пишем код диалогового окна","type":"header-two","key":"8qr2t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для начала скачайте код результатов предыдущего занятия, распакуйте и откройте в vscode. Это занятие будет на основе предыдущего. Ссылка на код:","type":"unstyled","key":"5isc4"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":63,"offset":0}],"inlineStyleRanges":[],"text":"https://github.com/madmaker/srmt-lsn11/archive/refs/tags/v1.zip","type":"unstyled","key":"9q2ru"},{"data":{"image":{"id":"631311bdde55064be5840ec0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"cce9k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы хотим получить вот такое диалоговое окно. Какое оно:","type":"unstyled","key":"j13u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На весь экран","type":"unordered-list-item","key":"24bh8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С подложкой с темным фоном","type":"unordered-list-item","key":"r090"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поверх всех остальных элементов","type":"unordered-list-item","key":"556ms"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Имеет свой фон","type":"unordered-list-item","key":"5l43l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Имеет внутри текст","type":"unordered-list-item","key":"9ihef"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Имеет внутри контактную форму","type":"unordered-list-item","key":"4thcu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В углу крестик, при клике на который окно должно закрываться","type":"unordered-list-item","key":"1ln25"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На нажатие кнопки ESC окно должно закрываться","type":"unordered-list-item","key":"5qv6d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При клике на подложку окно должно закрываться","type":"unordered-list-item","key":"dtnmj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При клике на кнопку \"Поехали\" форма должна проверяться и отправляться (это рассмотрим на следующем уроке)","type":"unordered-list-item","key":"1gvga"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Должно загружаться асинхронно: то есть не сразу со всей страницей, а после окончания загрузки или когда пользователь нажмет на кнопку (рассмотрим на следующих уроках)","type":"unordered-list-item","key":"a7bag"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код диалога не должен грузиться перед остальным сайтом, поэтому диалоговое окно мы будем описывать сразу под закрывающим тэгом footer. Сразу для всех диалогов сделаем общий контейнер

, тем самым обозначим, что это по смыслу контент не имеющий большой важности. Это уже элементы взаимодействия с пользователем.","type":"unstyled","key":"aru9i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внутри

сделаем контейнер

для нашего диалога. Определимся, что для всех диалогов будет общий класс \"modal\". (Modal - потому что это модальное окно. Модальное - потому что оно поверх всех остальных и перекрывает взаимодействие с сайтом, пока его не закрыть).","type":"unstyled","key":"14hvs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Я дальше буду код вписывать скринами, чтобы вы сами его писали, а не копировали.","type":"unstyled","key":"8v039"},{"data":{"image":{"id":"631313eeb7c3965ca1960b6d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7icd9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Наш новый контент появился в браузере в самом низу, как мы и заказывали.","type":"unstyled","key":"9t7nl"},{"data":{"image":{"id":"631314096bb2b75d8701f992"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"45o69"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Описываем стили для модального окна","type":"header-two","key":"262p8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь работаем со стилями.","type":"unstyled","key":"bj61d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте сразу сделаем новый фрагмент scss _modals.scss и импортируем его в genereal.scss","type":"unstyled","key":"92vlq"},{"data":{"image":{"id":"6313147850c36818b1e83d4d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"14mbt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Запускаем SASS Watcher","type":"header-three","key":"5d9r3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Уже привычное по прошлым урокам действие: открываем новый терминал в vscode и запускаем watcher (вотчер), чтобы наш scss автоматически компилировался в css:","type":"unstyled","key":"saoj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"sass --watch scss:css ","type":"blockquote","key":"65iln"},{"data":{"image":{"id":"631314f4de55064be5863074"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ao669"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обернем html-код контента окна еще в один контейнер:

- в нем будет контент окна.","type":"unstyled","key":"e8ruh"},{"data":{"image":{"id":"631317e594cd965a6f8fc364"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"a9tcd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В _modal.scss добавляем код:","type":"unstyled","key":"8788h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".modal {\n position: fixed;\n z-index: 500;\n top:0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0,0,0,0.8);\n display: grid;\n grid-template-columns: 1fr;\n align-items: center;","type":"blockquote","key":"adlqn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" .modal-content {\n background-color: black;\n background-image: url('../img/businessman-giving-hand-shake-2.jpg');\n background-position: center;\n background-size: cover;\n width:400px;\n margin: 0 auto;\n }\n}","type":"blockquote","key":"68bcp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Результат будет такой:","type":"unstyled","key":"f0r2f"},{"data":{"image":{"id":"63133162301fcc5415d96b80"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"e13lt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь подробнее о стилях.","type":"unstyled","key":"ekhss"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"position: fixed;","type":"unstyled","key":"fnim8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Определяем тип позиционирования елемента. Далее нужно будет задать координаты left, top, bottom, right. А вот относительно чего координаты, position как раз и задает:","type":"unstyled","key":"dt4ec"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"fixed - Фиксированный относительно окна. Задаем координаты относительно краев окна браузера.","type":"unordered-list-item","key":"chon1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"absolute - абсолютный относительно контента сайта. Задаем координаты относительно краев контента (контент может переходить за пределы окна)","type":"unordered-list-item","key":"841uc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"relative - относительно текущей позиции элемента. Фактически мы задаем на сколько подвинуть элемент относительно того, где он должен был показан изначально.","type":"unordered-list-item","key":"e8k1h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"static - значение по умолчанию.","type":"unordered-list-item","key":"em8ah"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В общем, нам нужно чтобы подложка нашего диалогового окна начиналась в верхнем левом углу окна и занимала 100% ширины и высоты. Поэтому fixed - координаты относительно окна.","type":"unstyled","key":"6ghj6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"top:0; left: 0;","type":"unstyled","key":"6lk3u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Координаты элемента. Левый верхний угол окна. Можно задать right, bottom - от правого и нижнего угла. Можно задать только одну из координат, а другая будет по умолчанию (там, где элемент изначально должен был быть показан)","type":"unstyled","key":"ebhca"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"z-index: 500;","type":"unstyled","key":"edhnf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"z-index задает положение слоев друг над другом. У всего сайта z-index:0. Если хотим, чтобы элемент был поверх - задаем z-index больше, например z-index:1. Мы для модального окна сразу задали 500, чтобы наверняка перекрыть все другие слои, которые будем в будущем делать.","type":"unstyled","key":"9e1ak"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обратите внимание, что z-index реально будет работать только если один слой находится поверх (или под) другим слоем. То есть у элемента должна быть position:absolute или fixed.","type":"unstyled","key":"67mon"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"width: 100%; height: 100%;","type":"unstyled","key":"d1f43"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ширина и высота блока на всю ширину/высоту окна.","type":"unstyled","key":"8ufms"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"background: rgba(0,0,0,0.8);","type":"unstyled","key":"8isga"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фон подложки полупрозрачный черный - чтобы затемнять контент, поверх которого открывается модальное окно.","type":"unstyled","key":"9o57i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":63,"offset":0,"style":"BOLD"}],"text":"display: grid;\ngrid-template-columns: 1fr;\nalign-items: center;","type":"unstyled","key":"auadu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Задали отображать дочерние элементы гридом, чтобы не заморачиваться с их вертикальным центрированием.","type":"unstyled","key":"db3g2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":".modal-content {","type":"unstyled","key":"a03qb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дальше описываем стиль дочернего контейнера, в котором сам диалог будет.","type":"unstyled","key":"1chp2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Задали фон черным, если картинка фона не загрузится.","type":"unstyled","key":"ar8dc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Задали изображение фона. Изображение можно скачать с github по ссылке:","type":"unstyled","key":"a7u5"},{"data":{"embedData":{"type":"external","host":"github.com","image":{"id":"63132f6b216e1e3521bf68c0","namespace":"zen_brief_embed","url_template":"https://avatars.dzeninfra.ru/get-zen_brief_embed/4748957/pub_631289a76ccd6621e2836e8d_63132f6b216e1e3521bf68c0/{size}","meta":{"main_color":"#F8F8F8"},"size":{"width":1200,"height":600},"width":600,"height":300,"link":"https://avatars.dzeninfra.ru/get-zen_brief_embed/4748957/pub_631289a76ccd6621e2836e8d_63132f6b216e1e3521bf68c0/smart_crop_600x300","src":"https://avatars.dzeninfra.ru/get-zen_brief_embed/4748957/pub_631289a76ccd6621e2836e8d_63132f6b216e1e3521bf68c0/smart_crop_600x300","main_color":"#F8F8F8","mainColor":"#F8F8F8"},"src":"https://github.com/madmaker/srmt22-lsn12/blob/main/img/businessman-giving-hand-shake-2.jpg","title":"srmt22-lsn12/businessman-giving-hand-shake-2.jpg at main · madmaker/srmt22-lsn12"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"du6sl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда страница откроется, нажмите сверху \"Download\". Изображение нужно положить в папку img нашего проекта.","type":"unstyled","key":"a0vsl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Задали, чтобы фон \"натягивался\" на контейнер и положение центра фона было по центру контейнера.","type":"unstyled","key":"7gv9d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Задали ширину в 400 px.","type":"unstyled","key":"bq8cr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"margin:0 auto;","type":"unstyled","key":"ab1nv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этим мы задаем автоматические отступы слева-справа и центрируем елемент (центрируются элементы или с заданной шириной, или с display:table)","type":"unstyled","key":"2na2d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Затемняем фон","type":"header-three","key":"dncai"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изображение фона яркое. Нам его нужно затемнить, чтобы белый текст читался хорошо. Это мы уже проходили на предыдущих уроках: нужно контент диалога обернуть в еще один контейнер

размером на всю высоту-ширину контейнера диалога и в нем задать полупрозрачный темный фон.","type":"unstyled","key":"frphr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В html код такой будет:","type":"unstyled","key":"4bh9a"},{"data":{"image":{"id":"6313309494cd965a6f9eaae2"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"e7g5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В SCSS добавили такой код:","type":"unstyled","key":"604l0"},{"data":{"image":{"id":"6313327a50c36818b1fc4df8"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"a8svq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Задали цвет шрифта, размеры на всю ширину-высоту родительского контейнера, полупрозрачный темный фон, убрали внешний отступ, задали внутренний отступ.","type":"unstyled","key":"a5m4e"},{"data":{"image":{"id":"631332a850c36818b1fc6d96"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"c08b2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все, с фоном разобрались.","type":"unstyled","key":"aggjb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавляем кнопку-крестик в углу","type":"header-three","key":"55nqf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь делаем кнопку-крестик в верхнем правом углу, при клике на которую диалог будет закрываться.","type":"unstyled","key":"3mre1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для крестика нам потребуется иконка.","type":"unstyled","key":"3knp4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы уже знакомы с сервисом иконочного шрифта fontello.com - оттуда и возьмем новую иконку.","type":"unstyled","key":"7p7qi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подробно мы о fontello и иконочном шрифте тренировались на занятии 9.","type":"unstyled","key":"duagj"},{"data":{"embedData":{"type":"yandex-zen-publication","publicationId":"630f2f8c454dc46639e9f54f","originalUrl":"https://zen.yandex.ru/media/id/62d57767cc38491671976547/630f2f8c454dc46639e9f54f","publisherId":"62d57767cc38491671976547","publisherName":"Обучение веб-программированию с нуля бесплатно","title":"Урок 9. Верстка дизайна сайта. Часть 1.","publishTime":1661989677622,"isPublisherVerified":false,"image":{"id":"630fabe1778f3f7313b26232","groupId":1860789,"imageName":"pub_630f2f8c454dc46639e9f54f_630fabe1778f3f7313b26232","namespace":"zen_doc","meta":{"mainColor":"#080808","origFormat":"PNG"},"sizes":{"orig":{"width":1752,"height":1420},"scale_360":{"width":360,"height":292},"scale_540":{"width":540,"height":438},"scale_600":{"width":600,"height":486},"scale_720":{"width":720,"height":584},"scale_1200":{"width":1200,"height":973},"scale_2400":{"width":1752,"height":1420}}},"badSeoLink":"true"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"1iii0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, открываем fontello.com","type":"unstyled","key":"6cq17"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":20,"offset":0}],"inlineStyleRanges":[],"text":"https://fontello.com","type":"unstyled","key":"b6e7p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":78,"style":"BOLD"}],"text":"У вас сайт должен запомнить ваш предыдущий набор иконок. Если открыть вкладку Customize names, то отобразятся иконки, которые мы уже выбирали.","type":"unstyled","key":"7jqtq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На всякий случай научу, как загрузить восстановить набор иконок из проекта.","type":"unstyled","key":"2c596"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нажимаем на кнопку конфигурации","type":"unstyled","key":"e65i4"},{"data":{"image":{"id":"63133506de55064be59bb245"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3te7r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":9,"style":"BOLD"}],"text":"Там жмем Import","type":"unstyled","key":"2m47k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откроется окно для выбора файла. Открываем папку нашего проекта, папку fonts, папку fontello-xxxxx, и там выбираем файл config.json - в нем хранится вся информация о шрифтах fontello. Файл загрузится и у вас отобразится набор ваших иконок.","type":"unstyled","key":"848he"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":31,"style":"BOLD"},{"length":6,"offset":61,"style":"BOLD"}],"text":"Теперь возвращаемся во вкладку Select Icons, в поиске вводим close, находим подходящий нам крестик.","type":"unstyled","key":"5buen"},{"data":{"image":{"id":"631335aeb7c3965ca1aa577a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2u09p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переходим снова в Customize Names. ","type":"unstyled","key":"cfa16"},{"data":{"image":{"id":"631335d4d908ff0441fc0354"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1l9o1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":58,"style":"BOLD"}],"text":"Туда добавился наш крестик. Класс иконки будет называться icon-cancel.","type":"unstyled","key":"dh6oc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тепер жмем Download Webfont.","type":"unstyled","key":"c20ai"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Скачается архив со шрифтом. Его нужно распаковать и папку fontello-xxxx перетащить в наш проект в папку fonts.","type":"unstyled","key":"1l255"},{"data":{"image":{"id":"6313362d02dc02256427a68d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7ik0e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У вас получится 2 папки fontello-xxxx: новая и старая. Старую нужно удалить.","type":"unstyled","key":"c6sh0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В general.scss нужно поправить путь к файлу fontello.css на новый (имя папки у нас поменялось)","type":"unstyled","key":"3mitk"},{"data":{"image":{"id":"6313367194cd965a6fa23cb8"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"d1hrv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":29,"style":"BOLD"}],"text":"Обратите внимание, что после fontello- у вас будет другой набор символов - имя папки fontello уникальное.","type":"unstyled","key":"8fh7n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Иконка есть. Теперь вставляем ее в диалог в index.html","type":"unstyled","key":"dqqcm"},{"data":{"image":{"id":"63133701301fcc5415dcdbfc"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"gpre"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"То есть мы добавили контейнер с классом \"close-cross-btn\" - к нему мы будем применять стили, с помощью которых кнопку поставим в правом верхнем углу диалога.","type":"unstyled","key":"2lvso"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А саму кнопку мы вставили внутрь этого контейнера и использовали просто класс, который нам выдал fontello. Ну и не забыли вставить неразрывный пробел внутрь ( ), чтобы какие-нибудь \"особенные\" браузеры не сочли этот элемент пустым и не убрали его с экрана.","type":"unstyled","key":"5a12e"},{"data":{"image":{"id":"6313381b301fcc5415dd890b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1lo04"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь дорабатываем стили.","type":"unstyled","key":"703pq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Я, когда придумывал стили для кнопки, прорабатывал их сначала в правой панели браузера. Потому что, как правило, приходится всегда экспериментировать. А лезть в vscode, писать там, потом идти в хром, обновлять страницу, получать не то, потом опять в vscode не удобно. Лучше сразу в браузере все проработать и готовый код скопировать в vscode.","type":"unstyled","key":"e0v71"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, код для контейнера кнопки-крестика такой:","type":"unstyled","key":"fv7tu"},{"data":{"image":{"id":"63133948143db33e45b3b653"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"dvpls"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"position:absolute","type":"unstyled","key":"7e9cn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Снова position, но со значением absolute. Нам в этот раз положение интересно не относительно окна, а относительно контента документа.","type":"unstyled","key":"3ahta"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Задали цвет шрифта белый, чтобы кнопка была белого цвета.","type":"unstyled","key":"6b9sm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Задали положение в верхнем правом углу.","type":"unstyled","key":"dg0bn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Смотрим результат.","type":"unstyled","key":"ejhi"},{"data":{"image":{"id":"631339992bac1c6f3ab4b5a1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ea5be"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все как мы и заказывали: в верхнем правом углу. ...только всего документа.","type":"unstyled","key":"90iuk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":75,"style":"BOLD"}],"text":"Сейчас мы познаем силу position. Давайте для родительского кнопке элемента modal-content зададим position:relative","type":"unstyled","key":"ap2u5"},{"data":{"image":{"id":"631339eb213f2f33bb673f02"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"dpaao"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Результат нас приятно удивит.","type":"unstyled","key":"508tj"},{"data":{"image":{"id":"63133a0250c36818b101968a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3u48t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Так вот: position:absolute позиционирует элемент относительно документа либо относительно первого родительского контейнера, у которого задано position:relative. ","type":"unstyled","key":"8hpt6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"То есть в первом случае мы задали верхний-правый угол и кнопка расположилась относительно всей страницы.","type":"unstyled","key":"7khtv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А во втором случае расположилась в верхнем правом углу относительно родительского элемента с position:relative.","type":"unstyled","key":"avc3r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь давайте просто кнопку чуть правее и выше разместим.","type":"unstyled","key":"8m8dk"},{"data":{"image":{"id":"63133af6213f2f33bb67f6f2"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7l1h2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Да-да, допустимы и отрицательные значения.","type":"unstyled","key":"4rg0d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кстати, с помощью отрицательного значения можно элемент задвинуть за пределы экрана. А потом, например, эффектно его выкатить при каком-либо событии.","type":"blockquote","key":"9arh2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Посмотрим результат.","type":"unstyled","key":"99o8i"},{"data":{"image":{"id":"631343815f432d28d969b88d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"arsmf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проблема...","type":"unstyled","key":"4cf1g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У нас полупрозрачный фон вышел за границы диалога. Причина в том, что мы задали padding и width:100%, а они суммируются между собой. Получилось, что ширина блока: 100% от родительского плюс 2em внутреннего отступа.","type":"unstyled","key":"55rdc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":43,"style":"BOLD"}],"text":"Эта проблема решается простым кодом стиля: box-sizing: border-box;","type":"unstyled","key":"dkrcf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"box-sizing как раз говорит браузеру учитывать или не учитывать границы, отступы при подсчете ширины/высоты контейнера.","type":"unstyled","key":"bj2eq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Посмотрите документацию, чтобы изучить это более подробно:","type":"unstyled","key":"42fle"},{"data":{"embedData":{"type":"external","host":"developer.mozilla.org","image":{"id":"631345c4c313c11728f53264","namespace":"zen_brief_embed","url_template":"https://avatars.dzeninfra.ru/get-zen_brief_embed/5282550/pub_631289a76ccd6621e2836e8d_631345c4c313c11728f53264/{size}","meta":{"main_color":"#000000"},"size":{"width":1920,"height":1080},"width":600,"height":300,"link":"https://avatars.dzeninfra.ru/get-zen_brief_embed/5282550/pub_631289a76ccd6621e2836e8d_631345c4c313c11728f53264/smart_crop_600x300","src":"https://avatars.dzeninfra.ru/get-zen_brief_embed/5282550/pub_631289a76ccd6621e2836e8d_631345c4c313c11728f53264/smart_crop_600x300","main_color":"#000000","mainColor":"#000000"},"src":"https://developer.mozilla.org/ru/docs/Web/CSS/box-sizing","title":"box-sizing - CSS | MDN"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"1jg86"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте теперь заполним диалог текстом:","type":"unstyled","key":"faikt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Свяжемся, обсудим удобный формат, подберем направление, составим программу, начнем твою карьеру в веб-разработке!

","type":"blockquote","key":"2ov91"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

ПОЛУЧИ БЕСПЛАТНО КОНСУЛЬТАЦИЮ И ПЕРВУЮ НЕДЕЛЮ ОБУЧЕНИЯ

","type":"blockquote","key":"1kiia"},{"data":{"image":{"id":"6313463b45a9205bb5cbd310"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"e8q20"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Думаю надо пошире сделать. 500px. И текст внутри диалога центрировать.","type":"unstyled","key":"aca88"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для modal-content ширину увеличим до 500px.","type":"unstyled","key":"4pjv2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":68,"style":"BOLD"}],"text":"Для modal-dark-bg-wrapper зададим позиционирование текст по центру. text-align: center;","type":"unstyled","key":"14k49"},{"data":{"image":{"id":"631346b4e3832b00ce171cfa"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fb2g8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот теперь вообще отлично.","type":"unstyled","key":"2e12p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML формы","type":"header-two","key":"bte4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сайт - это все очень хорошо. Но от него смысла нет, если он никак не взаимодействует с пользователем. Задача нашего сайта - дать посетителям доступ к курсам по программированию, а новых пригласить в клуб. Это диалоговое окно должно предложить человеку вступить в клуб, взяв у него номер телефона.","type":"unstyled","key":"44okh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для этого в диалоге должно быть поле ввода номера телефона и кнопка подтверждения.","type":"unstyled","key":"cjdc8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Под текстом диалога добавляем следующий код:","type":"unstyled","key":"1u0u8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"8ah7n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"

","type":"unstyled","key":"aaagl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основной контейнер формы. Все формы должны быть в нем.","type":"unstyled","key":"2u8vo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"","type":"unstyled","key":"ecaul"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":32,"style":"BOLD"}],"text":"Название поля ввода. В атрибуте for указывается имя поля ввода, к которому относится label.","type":"unstyled","key":"8jv5d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"","type":"unstyled","key":"fnds2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поле ввода. Сюда пользователь вводит данные.","type":"unstyled","key":"39c73"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"type - тип поля ввода. Может быть text, password, tel и т.д. Мы взяли tel, так как это поле ввода ожидает ввод номера телефона. В случае с password вводимый текст будет скрыт на экране. С случае с tel, на телефонах откроется клавиатура ввода телефона без лишних кнопок типа букв.","type":"unstyled","key":"dure4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"name - имя поля ввода. Браузер сохраняет данные заполненных форм и потом автоматически заполняет именно на основе этих данных. А также при отправке формы на сервер, этот name будет отправлен на сервер вместе со значением, которое ввел пользователь.","type":"unstyled","key":"cbo65"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"placeholder - заглушка. Сюда вводятся данные для примера пользователю. Например, пример номера телефона. При клике на поле, placeholder пропадает.","type":"unstyled","key":"19pjp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"