Модальне вікно на css, як зробити модальне вікно
Привіт всім, розповім про одну дуже зручною штуці, яка називається модальне вікно, ми розберемо, як зробити модальне вікно. Багато хто не розумію що це таке, я постараюся пояснити зрозумілою для вас мовою, іншими словами - це спливаюче вікно при натисканні на кнопку або текст.
Ще один приклад, де я вставив також в вікно, код банера і сам банер. на сторінці партнерської програми.
Розглянемо модальне вікно на css, щоб не морочити голову, будемо використовувати стилі, тобто прописує стилі в основному файлі і код в наше вікно, розглянемо всі в подробицях, що і як.
Модальне вікно на css, як зробити модальне вікно
Перше що нам потрібно це стилі, копіюємо повністю код зі стилями, який нижче і вставляємо його в ваш основний файл стилів, тобто в style.css
Зберігаємо, можна погратися зі стилями, і щось зробити красивіше, поміняти фон, рамку іншу зробити і так далі. Переходимо на сторінку де ви хочете щоб у вас спливало дане вікно, і вставте наступний код:
Тепер трохи розберемо що в ньому, потрібно вам поміняти. Де прописано «Кнопка» там ви можете вставити, як картинку тай текст, взагалі що хочете, то-есть при натисканні на її, буде відкриватися вікно. Там де прописано «Тут буде вміст вікна» вставте то що ви б хотіли бачити в спливаючому вікні, ось в принципі і все.
З повагою Євген Смецкой
Добрий день Євген! Приклад дуже сподобався своєю простотою і якістю. Але є питання. На сторінці є кілька зображень для їх подальшого збільшення в модальному вікні. Видимі невеликі зображення (на які потрібно натиснути) поміщені в область: a href = "#ModalOpen" title = "" rel = "nofollow"> ЗОБРАЖЕННЯ невелике 1 А велике зображення, яке повинно з'явитися в модельному вікні розміщено в цьому блоці: a href = "#close" title = "Закрити" rel = "nofollow"> X ВЕЛИКЕ ЗОБРАЖЕННЯ 1 Ця частина працює відмінно! ВЕЛИКЕ ЗОБРАЖЕННЯ 1 (далі БІ №1) відображається в модальному блоці ідеально! Але всі наступні зображення на сторінці, при кліці, відображають в модальному вікні знову БІ №1, замість зазначених для відображень БІ №2, БІ №3 і т.д. "Маленькі Зображення" відображаються як потрібно - всі різні. Питання до Вас Євген, чи можна це як то виправити, можливо я десь недогледів і роблю помилку. В цілому можна на даному прикладі зробити на сторінці 10-20 зображень, які б відображалися в модальному вікні на Вашому прикладі? Буду дуже вдячний за відповідь!
У моєму випадку кожне зображення це складальне креслення вироби. Таких виробів на сторінці буде близько 30. Розібрався, необхідно кожного вікна привласнювати свій ID, тобто якщо: a href = "# ModalOpen" то: div id = "ModalOpen" далі: якщо: a href = "# ModalOpen1" то: div id = "ModalOpen1" і т.п. Вийшло просто бомба!
Ну здорово: smile:
У мене кілька зображень - їх я зробила кнопками. При натисканні на зображення повинно відкриватися модульне вікно з потрібною інформацією (для кожної кнопки своя інформація). Як зробити, щоб в кожному вікні відкривалася різна інформація? Поки що для різних зображень у вікні відкривається один і той же текст.