INVERSER
INVERSER
Powerful web-based technologies
Powerful web-based technologies

Хотел бы поделиться опытом создания всплывающего содержимого (так называемого splashup), не popup window, а именно любого содержимого HTML+JS кода, который только Вам заблагорассудиться. Например, это можно использовать для всплывающей рекламы или любого окна, которое Вы только захотите.

Особенности: данный метод позволяет настроить всплывающее окно любым образом, т.е. Вы можете вывести его где угодно, как Вам угодно и когда это будет необходимо.

Код базируется на основе одного модуля для CMS Joomla. Код проверен, работоспособен и приносит довольно хороший результат, а именно: при прокрутке окна содержимое нашего контейнера всегда остается в той позиции, в которой Вы его поставили; обычно данную функцию осуществляют с помощью position:fixed или background-attachment:fixed, однако в тех же случаях, данные способы очень тормозят окно при прокрутке, что заметно на более слабых компьютерах.


В данной ситуации мы используем функцию displayfadeinbox по нажатию кнопки «Нажать». Вместо кнопки Вы можете использовать ссылку, как это требовалось одному из пользователей этого сайта, а именно заменить:

<input onclick="displayfadeinbox(this)" type="button" value="Нажать" />

на

<a onclick="displayfadeinbox(this)">Нажать</a>

Изображение сделать ссылкой на всплывающее содержимое:

<a onclick="displayfadeinbox(this)"><img scr="АДРЕС_ИЗОБРАЖЕНИЯ"></a>


24 строка отвечает за позиционирование данного элемента:

objref.style.marginLeft='50%'
objref.style.bottom='0px'

Также есть стили CSS:

<style>
body { background:#999;} /*цвет заливки фона всего окна*/
#close2 {background:#fff; /*цвет заливки фона*/
border-radius:20px; /*скругление цвета фона*/
position:absolute; /*позиционирование контейнера*/
width: 420px;/*ширина контейнера*/
height: 300px; /*высота*/
color: #000; /*цвет текста*/
top: 10px; /*отступ от верха страницы*/
padding: 4px; /*отступы от контейнера*/
z-index: 100000; /*позиционирование над всем содержимым страницы*/
display:none; /*отображение - нет, включение происходит при нажатии кнопки*/
text-align:left; /*позиционирование текста - лево*/
}
</style>

Если Вам необходимо, чтобы контейнер загружался через некоторое время, после загрузки страницы, то добавьте ПОСЛЕ:

function controlledhidebox(){
if (autohidebox[0]=='yes'){
var delayvar=(enablefade=='yes' && objref.filters)? (autohidebox[1]+objref.filters[0].duration)*1000 : autohidebox[1]*1000
setTimeout('hidefadebox()', delayvar)
}
}

КОД:

function initfunction(){
setTimeout('displayfadeinbox()', 100) //время, в миллисекундах, через которое появится контейнер

Да, кстати, для того, чтобы использовать этот код, Вам необходимо редактировать Вашу основную страницу (index.php шаблона Joomla, например), а вообще, этот код подойдет для любого обозревателя интернета и любой CMS.

Всплывающее окно

Файлы Всплывающее окно:

Скачать Всплывающее окно
DEMO

Добавить отзыв

Отзывов пока нет
Хостинг SSD, VPS, сервера
от 7.34$/365 дней
подробнее