В този урок ще ви кажа подробно как да се направи изскачащ прозорец с ръцете си, докато не се счупи мозъците им и да получите качество и практически резултати. Ето какво ще направим днес:
И това е всъщност много удобно и практично. За да направи сайта лесно. и ако всичко свърши чудесна работа с удобен функционалност, то със сигурност е вашия сайт, за да получите повече предимства и да се подобри използваемостта, благодарение на един прост изскачащ прозорец. И така, от думи към действия, за да се изскачащ прозорец може да бъде много лесно, всичко това проста процедура, ние може да реализира с помощта на доста известен сухожилие HTML + CSS + JQuery.
Всъщност, нека всичко, за да започне кода на HTML ще продължи и това е, което ние трябва да се:
ширина кутия: 400px;
височина: 300px;
фон-цвят: #ccc;
марж: 0px автомобил;
подложка: 10px;
шрифта: 40px;
Цвят: #fff;
>
.изскачащ ширина: 100%;
мин височина: 100%;
фон цвят: RGBA (0,0,0,0.5);
препълване: скрит;
позиции: фиксиран;
отгоре: 0px;
>
.изскачащ .popup съдържание марж: 40px авто 0px автомобил;
ширина: 200px;
височина: 80px;
подложка: 10px;
фон-цвят: # c5c5c5;
граничен радиус: 5px;
кутия сянка: 0px 0px 10px # 000;
>
Така че, първо трябва да се блокират само текста и да го сторихме клас кутия, в този клас, ние уточни ширина ширина: 400px; контейнер височина височина: 300px;, фонов цвят сив фон-цвят: #ccc. допълнително отстранява външната вдлъбнатина и центрирано марж единица: 0px автоматично;, после запита уплътнение, задаване на размера на шрифта на шрифта: 40px; и цвят бял цвят: #fff. С първия блок на втория всичко мине.
Тук по принцип качествата, които харесваме, защото ни изскачащ прозорец ще излязат и сянка цялата страница, ние поставяме ширина от 100% и се дължи на свойството мин-височина: 100%; попитахме минималната височина, а след това ние се елемент на дисплея имот звено в останалата част ще бъде скрит преливник: скрит;, предписан фиксирана позиция с нула компенсира от върха.
И последният блок на самото тяло на нашия изскачащ прозорец, той .popup-съдържание, външната горното поле на 40 пиксела параметри автоматично се приведе в съответствие върху маржа на център: 40px авто 0px автоматично; задайте ширина на ширина и височина: 200px; височина: 80px;, пълнеж пълнеж: 10px;, фонов цвят фон-цвят: # c5c5c5;, заобля граничния радиус ъгли: 5px; извършване на сянка кутия сянка: 0px 0px 10px # 000;.
Така че с CSS, сме измислили, където мисля, че всичко е просто и ясно, сега нека да отидем директно на кода Jquery, които всъщност ще ни даде възможност да се направи изскачащ прозорец. Първо, създаване на файл с резолюция .js в моя случай аз направих script.js и поставете следния код:
$ (Документ) .ready (функция () PopUpHide ();
>);
. Функция PopUpShow () $ ( "# прозореца изскачащи") шоу ();
>
функция PopUpHide () $ ( "# прозореца изскачащи") скрий () .;
>
Това ни даде кода, той разписани три функции, първият скрива изскачащ прозорец, когато страницата е заредена, а втората показва, а третият отново се скрива. Има вече не някакви трудности, които са напуснали ни се промени, само HTML код и цялата ни изскачащ прозорец е готова. Така че ние промените кода, както следва:
Какво се е променило, и да се промени следното, ние закачен Jquery библиотека:
И добави две връзки, за да се покаже и да се скрият изскачащия прозорец. Това е всичко, сега можете да изтеглите всичките три файлове на вашия сайт и тя ще работи, когато щракнете върху изскачащия прозорец за връзка ще се появяват и изчезват, както добре. Това е много удобно и лесен инструмент, който можете да използвате за вашия уеб сайт, където бихте желали и съответно го променят, както желаете.
Свързани статии