| |
|
|
| | Заранее прошу прощения, но мой знания JS=0, а сделать надо срочно.
Мне нужно сделать всплывающее окно-баннер на JS, т.е. НЕ открыть новое окно браузера, а в имющемся создать окошко поверх содержимого страницы. Я думаю все встречали такие надоедливые баннеры(часть из них флэшевых, а часть чисто JS, вот мне нужно чисто на JS). Содержание окна минимальное: квадрат занимающий 60-70% рабочей зоны браузер+кнопа"закрыть"+желательно, чтобы в случае скроллинга окно автоматически перемещалось на середину экрана, т.е. пока не нажмёшь кнопу "закрыть" содержимое страницы прочитать было проблематично).
А почему бы не воспользоваться поиском - задауться всё логичным вопросом. Обьясняю в чём собственно проблема:
Нашёл(уже часа 3 занимаюсь поиском) подобные скрипты, но они ОЧЕНЬ перегружены дополнительными ф-циями и за счёт этого теряют кроссбраузерность. Но так-как нет опыта с JS, то выкинуть лишнее и при этом сохранить работоспособность скрипта проблематично.
Заранее прошу прощения, за свой глупый вопрос, но надеюсь кто-нибудь сможет мне помочь!
Заранее огромное спасибо! | |
| |
|
|
| |
|
|
| |
для: locker_fx
(16.02.2008 в 21:03)
| | | хм, какое вознаграждение предлагаете? уж не думаете ли вы заработать на безвозмездной помощи | |
| |
|
|
| |
|
|
| |
для: вялый
(16.02.2008 в 21:30)
| | | Вот как заработаю так и вознаграждение будет...
На чём вы думаете я заработаю??? Мне это нужно для учёбы | |
| |
|
|
| |
|
|
| |
для: locker_fx
(16.02.2008 в 21:03)
| | |
<?php
<html>
<head>
<style>
#bla {
position: fixed;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
border: 10px solid #fff;
background-color: #f0f0f0;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<div id='bla'>
<a href='#' onclick="document.getElementById('bla').style.display='none'; return false;">Закрыть</a><br>
Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама
Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама
Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама
Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама
Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама
Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама
Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама
Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама
Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама Реклама
</div>
</body>
<html>
?>
|
оно? | |
| |
|
|
| |
|
|
| |
для: CrazyAngel
(16.02.2008 в 23:07)
| | | Да оно, но чуток функционал расширить надо. | |
| |
|
|
| |
|
|
| |
для: locker_fx
(16.02.2008 в 21:03)
| | | 1. готовите файл reklama.html (то, что будет внутри рекламного окна) и определяете его точные геометрические размеры (ширину, высоту).
Для примера я использовал код этого файла:
<html><body bgcolor="navy"></body></html>
|
2. готовите файл close.gif , где будет крестик (и надпись "Закрыть") - лучше, ИМХО, сделать его на прозрачной основе. Запоминаете его точные геометрические размеры (ширину, высоту).
Для примера я прописал в стилях для этого рисунка цветную подложку (background-color: red)
3. Пример кода (валидный в MSIE, FireFox, Opera):
<html>
<head>
<script>
var ROKNO, KREST, oLeft, oTop, ROKNO_width, KREST_width, KREST_height;
function myFuncBodyScroll ()
{
ROKNO.style.left = document.body.scrollLeft + oLeft + 'px';
ROKNO.style.top = document.body.scrollTop + oTop + 'px';
KREST.style.left = document.body.scrollLeft + (oLeft + ROKNO_width - KREST_width) + 'px';
KREST.style.top = document.body.scrollTop + (oTop - KREST_height - 2) + 'px';
}
function myFuncOpen ()
{
//определение объектов
ROKNO = document.getElementsByName ('myReklama') [0];
KREST = document.getElementById ('myClose');
//установка размеров рекламного окна и размеров "крестика"
var ROKNO_height = 234; //(нужный вам размер, в пикселях, см. п.1)
ROKNO_width = 345; //(нужный вам размер, в пикселях, см. п.1)
KREST_height = 21; //(нужный вам размер, в пикселях, см. п.2)
KREST_width = 43; //(нужный вам размер, в пикселях, см. п.2)
ROKNO.style.height = ROKNO_height + 'px';
ROKNO.style.width = ROKNO_width + 'px';
KREST.style.height = KREST_height + 'px';
KREST.style.width = KREST_width + 'px';
//определение размеров окна браузера и центрирование рекламного окна и "крестика"
var Hbody = document.body.clientHeight;
var Wbody = document.body.clientWidth;
oLeft = parseInt ((Wbody - ROKNO_width ) / 2, 10);
oTop = parseInt ((Hbody - ROKNO_height) / 2, 10);
myFuncBodyScroll ();
//делаете рекламное окно и крестик видимыми
ROKNO.style.display = 'block';
KREST.style.display = 'inline';
}
function myFuncClose ()
{
document.getElementsByName ('myReklama') [0].style.display = 'none';
document.getElementById ('myClose').style.display = 'none';
}
</script>
</head>
<body onscroll="myFuncBodyScroll ()">
<iframe name="myReklama" frameborder="0" src="reklama.html" style="z-index: 999; position: absolute; display: none" onload="myFuncOpen ()"></iframe>
<img id="myClose" src="close.gif" style="z-index: 999; background-color: red; position: absolute; cursor: pointer; display: none" onclick="myFuncClose ()">
<!-- имитация "большого" (имеющего скроллы) содержимого тела документа -->
<div style="width: 234%; height: 345%">content</div>
</body>
</html>
|
То, что обязательно должно присутствовать в HTML-коде, выделено жирно.
Прочее (название файлов, стили и т.д.) - на ваше усмотрение. | |
| |
|
|
| |
|
|
| |
для: CNTv2.0
(16.02.2008 в 23:30)
| | | Огромное вам спасибо!
Это то что нужно. Но вот возникла проблема. У меня есть файл, допустим index.html
Он состоит из:
<html>
<head>
<title>ТИТЛ</title>
</head>
<script language="JavaScript" src="okno.js"></script>
<body>
Контент
Контент
Контент
</body>
<html>
|
Т.е. необходимо всё что касается окна запихать в okno.js . Менять основной файл index.html нельзя!
Это реально(Если нельзя 100%, то хотябы частично)?
Буду очень благодарен за помощь!
P.S. Отдельная кнопка для закрытия впринципе не нужна, можно, как в предыдущём примере, просто строка "закрыть" в самом окне.
P.P.S. т.к. в <body> добавить onscroll не получиться(основной файл менять нельзя), а подругому обработать onscroll ИМХО не получиться(если получиться, то это очень хороршо!), может стоит по таймеру позиционировать окно, например раз в секунду? | |
| |
|
|
| |
|
|
| |
для: locker_fx
(17.02.2008 в 09:14)
| | | Можно. Измените вот так:
var ROKNO, KREST, oLeft, oTop, ROKNO_width, KREST_width, KREST_height;
function myFuncBodyScroll ()
{
ROKNO.style.left = document.body.scrollLeft + oLeft + 'px';
ROKNO.style.top = document.body.scrollTop + oTop + 'px';
KREST.style.left = document.body.scrollLeft + (oLeft + ROKNO_width - KREST_width) + 'px';
KREST.style.top = document.body.scrollTop + (oTop - KREST_height - 2) + 'px';
}
function myFuncOpen ()
{
//определение объектов
ROKNO = document.getElementsByName ('myReklama') [0];
KREST = document.getElementById ('myClose');
//установка размеров рекламного окна и размеров "крестика"
var ROKNO_height = 234; //(нужный вам размер, в пикселях, см. п.1)
ROKNO_width = 345; //(нужный вам размер, в пикселях, см. п.1)
KREST_height = 21; //(нужный вам размер, в пикселях, см. п.2)
KREST_width = 43; //(нужный вам размер, в пикселях, см. п.2)
ROKNO.style.height = ROKNO_height + 'px';
ROKNO.style.width = ROKNO_width + 'px';
KREST.style.height = KREST_height + 'px';
KREST.style.width = KREST_width + 'px';
//определение размеров окна браузера и центрирование рекламного окна и "крестика"
var Hbody = document.body.clientHeight;
var Wbody = document.body.clientWidth;
oLeft = parseInt ((Wbody - ROKNO_width ) / 2, 10);
oTop = parseInt ((Hbody - ROKNO_height) / 2, 10);
myFuncBodyScroll ();
//делаете рекламное окно и крестик видимыми
ROKNO.style.display = 'block';
KREST.style.display = 'inline';
}
function myFuncClose ()
{
document.getElementsByName ('myReklama') [0].style.display = 'none';
document.getElementById ('myClose').style.display = 'none';
}
document.open();
document.write('<iframe name="myReklama" frameborder="0" src="reklama.html" style="z-index: 999; position: absolute; display: none" onload="myFuncOpen()"></iframe>');
document.write('<img id="myClose" src="close.gif" style="z-index: 999; background-color: red; position: absolute; cursor: pointer; display: none" onclick="myFuncClose()" />');
document.close();
document.onscroll = myFuncBodyScroll;
|
Не забудьте убрать <script> и </script> из конечного файла | |
| |
|
|
| |
|
|
| |
для: bronenos
(17.02.2008 в 10:28)
| | | Спасибо, только пришлось исправить:
document.onscroll = myFuncBodyScroll;
|
на:
document.body.onscroll = myFuncBodyScroll;
|
Подскажите, пожалуйста, как правильно из файла reklama.html закрыть окошко? Делаю так(содержимое reklama.html):
<html><body bgcolor="navy"></body><a href='#' onclick="myFuncClose()">Закрыть</a></html>
|
Неработате. Подскажите, пожалуйста, как должно быть правильно.
А как сделать, чтобы при скролинге окошко не резко перемещалось в центр, а плавно двигалось к центру?
И последнее(не сочтите за наглость, пожалуйста), как сделать, чтобы например если юзер нажал кнопу закрыть, то это окошко не показывалось ему, например час? А потом по прошествии часа(или другого временного интервала показывалось ему?
Заранее всем ГИГАНТСКОЕ спасибо! | |
| |
|
|
| |
|
|
| |
для: locker_fx
(17.02.2008 в 12:10)
| | | Убегаю, времени нет.
Чтоб плавно - работайте с setTimeout в цикле
Чтоб не показывалось - ставьте куку со временем и потом смотрите на куку, прошло время или нет | |
| |
|
|
| |
|
|
| |
для: bronenos
(17.02.2008 в 13:21)
| | | >Чтоб не показывалось - ставьте куку со временем и потом смотрите на куку, прошло время или нет
Хе-хе...
А "куку" когда потом смотреть?
Через час?
А кто скажет, что точно час прошел?
setTimeout?
Тогда зачем "кука"-то вовсе? | |
| |
|
|
| |
|
|
| |
для: locker_fx
(17.02.2008 в 12:10)
| | |
<html>
<head>
<script>
var ROKNO, ROKNO_width, ROKNO_height;
var KREST, KREST_width, KREST_height; //delete
function myFuncScrollResize () //определение размеров окна и центрирование рекламного окна и "крестика"
{
var oLeft = parseInt ((document.body.clientWidth - ROKNO_width ) / 2, 10);
var oTop = parseInt ((document.body.clientHeight - ROKNO_height) / 2, 10);
with (ROKNO.style)
{left = document.body.scrollLeft + oLeft + 'px'; top = document.body.scrollTop + oTop + 'px'}
with (KREST.style) //delete
{ //delete
left = document.body.scrollLeft + (oLeft + ROKNO_width - KREST_width) + 'px'; //delete
top = document.body.scrollTop + (oTop - KREST_height - 2) + 'px'; //delete
} //delete
}
function myFuncOpen () //рекламное окно и "крестик" видимые
{
myFuncScrollResize ();
ROKNO.style.display = 'block';
KREST.style.display = 'inline'; //delete
}
function myFuncClose () //рекламное окно и "крестик" невидимые + запуск таймера на 1 час
{
ROKNO.style.display = 'none';
KREST.style.display = 'none'; //delete
setTimeout (myFuncOpen, (60 * 60 * 1000));
}
function myAddFunc (o, e, f, b) //"навешивание" функций
{
if (document.addEventListener) o.addEventListener (e, f, b);
else if (document.attachEvent) o.attachEvent ('on' + e, f, b);
else o ['on' + e] = f;
}
onload = function ()
{
//создание рекламного окна
ROKNO = document.createElement ('iframe');
with (ROKNO) {id = 'myReklama'; frameBorder = 0; src = 'reklama.html'}
with (ROKNO.style) {zIndex = 999; position = 'absolute'; display = 'none'}
myAddFunc (ROKNO, 'load', myFuncOpen, false);
//создание "крестика"
KREST = document.createElement ('img'); //delete
with (KREST) {id = 'myClose'; src = 'close.gif'} //delete
with (KREST.style) {zIndex = 999; backgroundColor = 'red'; position = 'absolute'; cursor = 'pointer'; display = 'none'} //delete
myAddFunc (KREST, 'click', myFuncClose, false); //delete
//"приживление" рекламного окна и "крестика"
with (document.body)
{
appendChild (ROKNO);
appendChild (KREST); //delete
}
//"навешивание" на окно функции скроллинга и функции изменения размеров;
myAddFunc (window, 'scroll', myFuncScrollResize, false);
myAddFunc (window, 'resize', myFuncScrollResize, false);
//установка размеров рекламного окна и размеров "крестика"
ROKNO_height = 234; ROKNO_width = 345;
KREST_height = 21; KREST_width = 43; //delete
with (ROKNO.style) {height = ROKNO_height + 'px'; width = ROKNO_width + 'px'}
with (KREST.style) {height = KREST_height + 'px'; width = KREST_width + 'px'} //delete
myFuncScrollResize ();
}
</script>
</head>
<body>
<div style="width: 234%; height: 345%">content</div>
</body>
</html>
|
1. "Плавность хода рекламного окна" при скролле тела документа не реализуема.
Ибо onscroll - это дискретно-перманентное событие, а не разовое.
2. И по поводу "крестика" внутри рекламного окна.
Сделать это легко - удалите все строки кода, в которых есть //delete.
А файл reklama.html должен тогда иметь вид:
<html><body bgcolor="silver">
<a href="#" onclick="top.self.myFuncClose (); return false">Закрыть</a>
</body></html>
|
Однако работать это будет только в одном случае - если файл reklama.html будет С ТОГО ЖЕ ДОМЕНА, что и индексный файл (код которого приведён выше).
А вот с картинкой-"крестиком" будет работать в любом варианте - и со "своим", и с "чужим" файлом внутри рекламного окна. | |
| |
|
|
|
