Например, аз взех една проста оформление premiumpixels.com. Можете да намерите всякакви други опции, като напишете в Google «изскачащ прозорец безплатно PSD» или нещо подобно, добре, или се направи опция ви, ако са малко по-дизайнер. Това няма значение.
Тъй като кутията ще имаме един прост, изложени обичайната си HTML (въпреки че може да бъде направено чрез динамично JS / JQuery). прозореца ми се състои от заглавие, текст и два бутона, HTML-код за това:
По мое мнение добър оформление - използва семантично елементи и класове, се добавят документи за самоличност, за да работи с скриптове. Ако не планирате да подкрепят Internet Explorer браузъри под осма версия,
може да бъде заменен от псевдо: след /: преди.
Добавете няколко CSS стилове в нашия прозорец:
По отношение на стария браузър Internet Explorer се прилага принципът на постепенно влошаване.
полупрозрачен фон
Да се създаде прозрачна замъглява фона на цялата страница. Впоследствие организира външния му вид, заедно с изскачащ прозорец - тя ще изглежда много впечатляващо.
Добави към края на документа преди затварянето
празен елемент
с идентификационния номер, и класа:
я простре до пълния му ширина и височина на документа, добавете прозрачност, фиксирано позициониране и голям Z-индексът за припокриването на всички елементи на страницата - по-висок Z-индекс трябва да е само в изскачащия прозорец нагоре:
Моля, имайте предвид, че една от основните функции, тук е позицията: фиксирани. така, че тъмен фон превъртате чрез превъртане на страниците. Ето защо, този метод няма да работи в IE6 - той не поддържа тази функция и ще трябва да се потърси помощта на JS. Но ние сме оставени сами на браузъра, нали?
И още нещо - прозрачност различни браузъри нататък, аз осъзнах, чрез JQ, в IE недостатък е открит малък скрит при показване на блока.
Резултатът от извършената досега работа без скриптове:
JQuery скриптове
основен
Нека Осъществено от нашия прозорец, ние осъзнаваме, изкачването при настъпване на събитие, като например кликване на мишката. Добавяне на текст към вашия документ, когато щракнете върху полето, което ще се появи:
Кликнете тук, за да отвори изскачащ прозорец
Ние започваме нашата сценарист изскачащ прозорец:
На първо място, скриване на прозореца и добавете прозрачен контейнер различни браузъри с фона:
Разбира се, можете да прикрие съществените елементи на CSS имоти дисплей: няма. но когато JS е изключен, не можем да отворите прозореца. Въпреки, че всичко зависи от задачата.
може да бъде добавен за удобство на потребителя в съобщение маркировка тези с JS увреждания, нещо като това:
Следващата стъпка - да виси на един клик боравене със събития елементи # кликнете-ми за витрини и # BTN-близки, # скрий-оформление. съответно да се скрие. Ние използваме готови методи fadeIn / fadeOut:
Необходимо е също така да се мотае, работещи върху бутоните, кликнете правят никакви действия след извършване отново скриете прозорец:
Както можете да видите, като се използва JQuery всичко е просто да грозота. Дори и баба си ще направи разбор на кода.
Advanced функционалност - центриране прозорец в средата на листа
Сега всичко работи както трябва, но ще направим нещо друго, а именно, центъра на прозореца в средата на страницата, на JQ. Отново можете да направите обичайните CSS, но JS / JQuery ви позволява да направите всичко по-гъвкава - динамично да се изчисли размера на прозореца и на елемента и замени на желаното място чрез издаване на всичко това просто малко функция:
Специално внимание следва да се обърне ценности оставени и топ координати. в който vysschityvaem широчина / височина на прозореца на браузъра, се изважда от него широчина / височина на приемния елемент и да се делят на две числа - това ще бъде в центъра на страницата. Като параметър на функция добавят #popup елемент. Остава да се направят промени в кода - извика функцията в началото на скрипта и да го окачите на манипулатора за преоразмеряване, (преоразмеряване на прозореца) на прозорец. че прозорецът е винаги по средата. Пълният код:
Както беше отбелязано от читатели за изскачащия прозорец нагоре не е била разгледана документ се превърта. С цел да направим нашия ход прозорец нагоре или надолу, докато превъртате, просто трябва да добавите имот елемент .popup позиции: фиксиран.
Благодарим Ви, че Андрю и потребители ebragim.
Рейтинг статия
Андрю, това може да стане много по-лесно: да направи позицията за изскачащ прозорец: фиксирана D такива прозорци обикновено не вземат много информация, така че го оставете да виси като затъмнена субстрат е винаги в центъра на града. А ако искате да се покаже много информация наведнъж - по-добре е да издаде на отделна страница. Или не предоставя информация, докато пишете, като витрина касата на: поиска от потребителя за лична информация, както и да се скрие, отворите втори прозорец и др ...
Благодаря ви, пое като основа за вашия скрипт. Въпреки това, когато прилагането се оказа, че не е взето под внимание при функцията за превъртане центриране. Поради това е необходимо да се промени малко позицията на височината на изчисление:
Е, в резултат на това да scrollTop изчислява по време на прозореца на повикване, той трябваше да се отложи прилагането на подравняване и центриране, когато преоразмеряване на '# кликване мен "манипулатор. В същото манипулатор още един низ да не да превъртите, когато се работи #popup:
'# BTN-близо, # скрий оформление "и отмяна на водача:
Андрю, благодаря ви за научни изследвания и за споделяне на резултатите, ще бъде необходимо да се допълни чл. Имаше идеи за това как да се приложи по-гъвкав прозорец, няма да има време - добави.
