Модальне вікно за допомогою CSS і jQuery
Розповідаючи про різній техніці сайтобудування, було б безглуздо не розповісти, про деякі способи створення модальних вікон. Про призначення, корисності і виникаючі проблеми використання спливаючих, модальних вікон ми міркувати не будемо. Розберемо лише один з численних прикладів створення таких віконець.
Бувають ситуації коли немає можливості використовувати спеціальні плагіни, наприклад такі як fancybox і prettyPhoto. тому варто зрозуміти, як можна створити свій власний модальне вікно.
Давайте подивимося, як це зробити:
Почнемо з додавання тегів з наступними атрибутами:
- href - #? w = 500 вказує ширину вікна
- rel - унікальний атрибут для кожного вікна
- class = "poplight" - клас для показу спливаючого вікна
Див. Вікно в дії - Ширина = 500px
Потім нам необхідно створити вбудовану розмітку для спливаючого вікна. Розмістити можна в будь-якому місці сторінки, ну наприклад в нижній частині змісту. Зверніть увагу, що ідентифікатор спливаючого вікна відповідає атрибуту rel тегу
Це і буде пов'язувати посилання і спливаюче вікно разом.
Заголовок
Будь-який текст, що душі завгодно
І так, з розміщенням нашого вікна на сторінці ми розібралися, тепер давайте оформимо його за допомогою стилів, надамо йому, так би мовити, благопристойний вигляд.
CSS Верстка
Для більшої ясності, я прописав деякі пояснення до параметрів стилю нашого віконця. Так як спливаючі вікна можуть мати різний розмір, ми не вказуємо в CSS popup_block краю вікна, обчислити необхідний розмір, це як раз завдання для jQuery.
З формуванням вікна і його зовнішнього вигляду за допомогою css, думаю особливих складнощів не виникне. Стилі можете прописати безпосередньо на сторінці HTML, між тегами
і . а можете винести в окремий файл ваших стилів, зазвичай це файл style.css. або щось в цьому роді.Налаштування JQuery
Для повноцінної роботи модального вікна, необхідно підключити jQuery, хто не знайомий з роботою цієї бібліотеки можете прочитати JQUERY - ВСТУПНА.
Ну, а ми підемо далі. Ви можете завантажити останню версію JQuery з сайту бібліотеки, або ж використовувати розміщений в надрах Google окремий файл, підключивши його до документа, в розділі перед закриває тегом