Popup - изскачащ прозорец, скриптове, Java Script PLO

В тази статия, ще опиша принципа на сценария и необходимите CSS свойства чрез манипулиране на стойностите на които се постигат желаните ефекти PopUp изскачащ прозорец.

И така, както обикновено логика. Call PopUp обикновено се прави след kakihto действията на потребителите, може да е просто изтегляне на страницата в браузъра на потребителя, и кликнете върху линка, или това, което обектът на страницата. Но в този случай, ще се фокусира върху последния вариант, има телефони изскачащи прозорци bydet извършени след кликване на мишката върху линка - кликнете събитие.

За да направите това, да възложат връзка атрибут ID на. и я възлага на тази връзка кликване събитие. чиято функция се показва на прозореца на поп-нагоре ще се нарича PopUp.

И изпрати HTML като параметър на функция на скрипта не е много удобно. Затова беше решено да се прехвърли функция параметър се DOM обект, който съдържа правото да показва съдържание в изскачащ прозорец. Също така го подаде на обекта функция, която ще бъде назначен за събитието кликване, за които функцията се нарича дисплей PopUp прозорец.

Тя изглежда по следния начин:

И HTML за този пример ще изглежда така:

Сега, описание на сценария и неговите функции. Описание ще бъде например POP-UP скрипт MooTools, TK двата варианта се различават един от друг, само синтаксиса на характерните за тези библиотеки.

И така, в случай уеб страница натоварване - domready събитие. PopUp извиква функция (OBJ, триг). които се предават като входни параметри: препратка към възрази съдържащ да бъдат показани в изскачащ прозорец на HTML кода, както и справка за обекта на DOM, че ще бъде назначен за събитие кликване щракнете върху бутона.

Код POP-UP Mootools скрипт.

И така, това, което прави тази функция PopUp. След призива й създава променлива Var HTML. който ще съдържа HTML, DOM обект предава от първия входен параметър - OBJ. След като получи необходимата HTML за показване в изскачащ прозорец, премахване на обекта от документа за DOM да използвате функцията унищожи.

Следваща sozdaetsya променлива тяло. който ще съдържа линк към тялото сайт на документа. тя е в тялото. контейнера ще бъдат поставени изскачащи прозорци.

След това той създава променлива HTML - който съдържа генерира изскачащи прозореца HTML маркиране със съдържанието поставен в него от променлива HTML.

Следващата точка - както споменах по-рано в тази статия, PopUp - често се използва за привличане на повече внимание на потребителя, или по-голяма концентрация на съдържанието в изскачащия прозорец. Поради това, за по-голяма ефективност е препоръчително да потъмнее останалата част от съдържанието на уеб страница, това създава нов HTML елемент с победа на ID. както и поставен на изскачащ прозорец HTML код. След което предметът се поставя в тялото. Този обект ще блокира цялата страница, а фонът е настроен да бъде полупрозрачна PNG.

На следващо място, кодът е функция showWin (). но първо ще опиша някои от кода, който призовава тази функция, както и скрива PopUp.

Popup обажда код и да го крие:

Така че първоначално възлагане на един клик събитие на елемент на втория вход параметър на функцията, както и събитие извикване на функция, която показва изскачащ прозорец. и след това да зададете натискането събитие на елемента с $ ( "Отказ"). който е в прозорците на контейнер изскачащи и задавате този дисплей събитие CSS имот: няма; т $ ( "спечели"). като по този начин се крие изскачащия.

Сега описанието на showWin на функцията (). Контейнер, който показва $ ( "спечели") и по този начин се показва изскачащ прозорец.

И така, след инсталиране на дисплея: блок; Контейнер $ (WIN);. закрит от цялото съдържание на страницата, и след това, на $ контейнер ( "изскачащи прозорци"). установява някои CSS свойства. В първия семейството е на дисплея: блок. веднага след това пълна прозрачност непрозрачност: 0. и след това се изчислява Поп-UP размера на прозореца за правилното му позициониране в средата на прозореца на браузъра. Това е много важно, защото без дисплей: блок. getSize () функция не може правилно да се изчисли размера на елемента.

След установяване на имоти отгоре и си тръгна. ще зададе стойността на непрозрачност е равен на единица. Що се отнася до изчисляването тук е много проста: да се изчисли на ширината на прозореца на браузъра, разделете го на половина, и се изважда от него половината от ширината на прозореца на поп-нагоре, по същия начин се изчислява на челна позиция. Поради това изскачащ прозорец винаги се показва в центъра на прозореца на браузъра, независимо от размера на двата прозореца на браузъра и самата $ блок ( "изскачащи прозорци").

Сега описание на CSS свойства.

За #win - определено ширината и височината до 100%, и абсолютно позициониране с топ: 0 и лявата: 0. както и на дисплея: няма.

За #popup - не забравяйте да се позиции: фиксиран. ако някой друг извършва IE6 подкрепа за проектите си, в тази статия ще намерите начин да се реши проблема с позиции: фиксирана - Позиция: фиксирана

Това е всичко, а останалите по ваш вкус :)

Вижте пример за Mootools: PopUp Mootools.

Изтеглете пример за Mootools: PopUp Mootools.

Вижте пример за JQuery: PopUp Jquery.

Изтеглете пример за JQuery: PopUp Jqueryr.

Добър въпрос. Решение на този проблем ще се появи по примера на предаването като променлива в Pop_up, път към изображението.

Сама по себе си се съхранява в променлива връзки HREF, които, когато са кликнали върху функция showWin HREF стойност се предава, например # IMG / 1.jpg.

HTML кодът е както следва:

код:

Тук, от връзките, които са извършвали клик, извлича стойността на HREF и отстранява знака лира и showWin на извикване на функция получава чист път към изображението.

Там просто заменя SRC на снимки в изскачащ прозорец на получена от HREF:
Код. $ ( "# Popup IMG") ATTR ( "SRC", Var).;.

Преглед на новото пример: изскачащи прозорци 2
Изтегляне на нов пример: popup-2.zip

Благодаря ви за сценария, като търсите. И да ми каже как да функционира PopUp (OBJ, триг) финала за актуализиране, така да се каже, главния прозорец, когато прозорецът е затворен. В изскачащия прозорец, поставете някакво действие (на потребителя да въвежда данни в формата) и необходимостта от актуализиране на главния прозорец, когато прозорецът е затворен. Как да се разшири функцията PopUp да задейства актуализация на главния прозорец?
Благодаря предварително за вашата помощ.

Prompt и как да актуализирате главния прозорец при затваряне на изскачащия прозорец?

Кажи ми, моля те, и по този начин могат да се предават не се свърже с кода на изображението и HTML. Това е, по мое страница, има няколко връзки, които трябва да бъдат в изскачащ прозорец, за да покаже различни форми? Благодаря предварително!

Елементен изпълнение - до образуване на масив с елементи, съдържащи форма код:

Код: Var arrForm = [ '

.1.

''

.2.

''

.3.

'];

По отношение на актуализиране на главния прозорец:

ако ($ ( "Отказ")) $ ( "Отказ") addEvent (с щракване, функция () $ (WIN) setStyle ( "дисплей", "никой") ..;
window.location.reload ();
>);
>

Много интересен пример - но съжалявам - Аз съм просто започваме да разбираме всичко това - да ми каже как да се зареди на изскачащи прозорци меню наведнъж при зареждането на страницата.

Трябва да се обадя функция showWin () функция само по този начин:

За PopUp Jqueryr Фиксирана бъг в popup.js, открити някога затварящия маркер