Сьогодні ми розглянемо цікавий скрипт, який допоможе нам виводити будь-які зовнішні файли в красивому модальном вікні.
Ця функція буде особливо корисна на сайтах, де необхідно представити багато інформації, і в той же час не сильно завантажувати сторінку. Всі додаткові документи можна виводити в таких модальних вікнах.
З самого початку документа підключаємо фреймворк і функцію ::
Далі підключаємо стилі оформлення. В даному прикладі я використовував і зовнішню таблицю стилів і внутрішні стилі. Можете їх об'єднати в одному місці, якщо бажаєте.
У коді присутні шляху до картинок, так що якщо будете їх переносити - НЕ забивайті про шляхи.
І тепер в будь-якому місці документа вставляємо посилання на зовнішній файл і створюємо кнопку для виклику цього файлу.
Урок завершено. До завтра.
5 останніх уроків рубрики "jQuery"
Сьогодні ми б хотіли вам розповісти про бібліотеку TypeIt - безкоштовному jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна домогтися дуже реалістичного ефекту.
jQuery плагін для створення тимчасової шкали.
jQuery плагін для створення діаграми Ганта.
Приклад того як здійснити завантаження файлу через PHP і jQuery ajax.
Дякую за урок - дуже вчасно! Скажіть як зробити посиланням на модальне вікно зображення?
Дякую за урок. а не підкажіть як бути з кодуванням, замість русскійх букв абракадабра?
поміняйте кодування charset = utf-8 на charset = windows-1251
Якщо поставити 2 кнопки і завантажувати ними соответсвенно різні зовнішні файли, то в Опері іноді вікно зависає і не хоче сховатися. В чому може бути проблема? Як грамотно зробити завантаження різних файлів з посилань на одній сторінці?
Така ж дурниця, як у Едуард і Zamir. Завантажує по обидва кнопок один і той же файл і не хоче закриватися. Як виправити?
nosferatu_demian
Все таки знайшов рішення. Є думка, що розробники спеціально ставлять граблі, що б до них зверталися за допомогою. Загалом в скрипті який прописуємо в голові видалити ось ця умова: і тоді буде кожен раз завантажувати новий вміст. я взагалі вантажу окремий файл в якому є підключення до бази, запити тощо ) Enjoy!
Денис Васильєв
Якщо ти відкинеш все умова то у тебе не буде взагалі нічого. Включи логіку. Витягуємо вміст умови, а саме умова видаляємо.
YO! Пипец. Ви можете розповісти людям як зробити по 2-10 модальних Окан на сторінці. Скрізь люди просять але тиша. Чисто жорстокий адмін, виходить.
Гаразд, тепер я Адмін! # Overlay-добавте наприер, # overlay2 і так всюди в стилях і в id = "overlay2" так само в CSS div.overlay2 і чим більше нових вікон тим більше 2-50 номерків. Далі зрозумієте!
VALERI - ти класний адмін. )
Отілчно! з приводу кодування - і де її міняти? у мене і так стоїть в title: а російський текст в модальному вікні - відображається не коректно. Підкажіть, плс.
З приводу додавання кількох вікон: 1) Треба створити кілька різних стилів (стільки скільки ви хочете вікон на сайт) за прикладом як уже делалі..но з різним названіем..напрімер overlay1, overlay2, в них просто копіюєте то що було в початковому стилі . Також вступите з wrap 2) створіть потрібний вам файл (який ви збираєтеся завантажувати) і зробіть на нього посилання a href = "шлях до файлу. Дозвіл" rel = "# overlay" button type = "button" Напис на кнопці / button / a 3) ну і відповідно змінити id у div елементів на ті що ви створили в першому пункті. і насолоджуйтеся вікнами. а Євгену величезний респект за ресурс. Спасибі і низький уклін!
якщо він буде відображати все одно один і той же файл, то тоді доведеться вміст довантажувати фала вставляти між div id = "wrap" тоді точно все працювати буде. але вже на жаль окремий файл не буде загружатся. )
підкажіть як вивести файл (або частина файлу) в тому ж вікні (сторінці), що і сама кнопка?
це вона проблема, якщо в модельному вікні тоесть є скрипт jQuery то він вже працювати не буде
ну якщо розглядати фішку скрипта з того боку що він у вікно підвантажує файл з певним вмістом, то так. скрипт працювати не буде! Але якщо ж розглядати його з боку завантаження довільного вмісту через блокові елементи самого коду, то скрипт працює!)
а як в цьому вікні відкрити PHP файл ось з таким вмістом (додавання коментаря), просто там є перевірка користувач або гість.
навіть якщо немає перевірки, все одно не завантажує php
Вітання! Підкажіть будь ласка, хто знає! При натисканні на посилання в модальному вікні контент відкривається в цьому ж модальном вікні. А як відкрити контент в новому вікні (НЕ модальном). Дякуємо!
Допоможіть будь ласка! Чому при підключенні одного скрипта (), У мене не працює інший?
І ще проблема: (((Саме модальне вікно виводиться, а контенту в ньому немає - пусте. Ніяк не можу розібратися. Допоможіть будь ласка.
А не скажите як підключити зовнішній сайт в модальне вікно, наприклад що б в модальне вікно завантажувався сайт vkontahte.ru
Супер. Дуже корисний скрипт. Дякуємо.
В даному прикладі використовується скрипт виконується на стороні сервера. У мене на Yandex-narod працює страшно кострубато. То не довантажується контент в IE і FF, то завантажується і далі намагається піти на іншу сторінку в ОПЕРІ. Як вирішити проблему.
Чому у мене неоткрівает файл. скачав исходник запусти а файл неотображаетца че ет?
Дякую за матеріал, є бажання затемнити основну сторінку під модальним вікном, підкажіть як зробити.
Хлопці підкажіть, все працює замечательно.НО, російський текст в модальному вікні - відображається не коректно. Що робити? плз! Потрібна інфа!
bishop, utf8 кодування тексту повинна бити
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!