Модальна форма контактів на css3

Модальна форма контактів на CSS3

Перш ніж приступимо до розбору всіх складових, звертаю увагу на те, що даний метод коректно працює у всіх сучасних браузерах: Chrome, Firefox, Opera, Safari, так само в Internet Explorer, починаючи з 9-ї версії, підтримується стабільна робота цього рішення.
Найцікавіше, на мій погляд, це те що, використовується стандартно структурована в html форма контактів, прив'язана до сформованого в css, модальному блоку. Навіть не так, сама форма наділена функціями модального вікна за допомогою css3.

HTML Розмітка форми контактів

Для побудови форми, використовуємо тег

з внутрішніми елементами і . У конкретному прикладі, задіяв 4 основних поля будь-, стандартної форми зворотного зв'язку, це: «Ім'я користувача», «Email», поле введення текстового повідомлення, і кнопка «Надіслати» відповідно.</p> <p><form class="modal"> <input name="name" placeholder="Укажите ваше имя:" class="name" required /> <input name="emailaddress" placeholder="Укажите ваш Email:" class="email" type="email" required /> <textarea rows="4" cols="50" name="subject" placeholder="Введите ваше сообщение:" class="message" required>

Як бачите, нічого незвичайного, форма як форма, хіба що для виведення тексту всередині полів, який зникає при отриманні фокусу, використовував атрибут placeholder. Однак у всіх браузерах текст зникає по різному, в одних при фокусі (IE 10+ і Safari), в інших при наявності хоча б одного введеного символу (Chrome і FireFox). Що б placeholder спрацьовував у всіх браузерах однаково, прописав спеціальні css правила:

Ось так, плавно, ми перейшли до формування стилів в CSS, як самої форми, так і її внутрішніх елементів.

Як писав вище, форма виконана в темних тонах, поля введення і кнопка виділені більш світлими відтінками. При оформленні використовував обрізка кутів, легку прозорість основного фону і градієнтну заливку для кнопки «відправити». За основу, з деякими поправками, враховуючи модальність майбутньої форми, був узятий набір правил і властивостей css, форми, про створення якої розповідав раніше. До речі, там же ви знайдете і опис форми в світлих тонах, а зробити її модальної вже не складе труднощів.

Стиль форми може бути абсолютно будь-який, а її модальність вирішується найпростішим додаванням тегу

певного класу, в прикладі, для наділення форми функцій спливаючого вікна, в тезі прописуємо клас modal. з яким і будемо працювати в css.
Форма має використовуватися при натисканні на певну посилання або кнопку, і з'являтися по центру сторінки не затемненому фоні. Фон затемнення виконуємо у вигляді посилання з класом overlay. для того щоб була можливість закриття модальної форми при натисканні поза формою, так як кнопка закриття не передбачена в даному варіанті виконання, при бажанні прикрутити таку кнопку не складе труднощів. Ідентифікатор id = "form1" зв'яже форму і шар затемнення з активує посиланням.

Посиланням відкриття модальної форми можуть бути будь-які елементи сторінки, пункт меню, кнопки, текст або картинка, наприклад так:

відкрити форму

Шар затемнення у вигляді посилання розміщуєте безпосередньо перед формою, не є принциповим, а для того щоб все було «розкладено по полицях», хаосу в коді html і без того досить, а виглядати це буде так:

відкрити форму

3. CSS форми. Всі стилі упаковані і винесені в окремий файл style-form.css. Ви можете підключити його до документа, прописавши в розділі . або ж скопіювавши весь його вміст вбудувати в основну таблицю стилів вашого сайту.

Схожі статті

• Модальні форми в dll стор