Замена pop-up окна слоем - помогите

Старый mweb

Модератор: [mweb team]

Замена pop-up окна слоем - помогите

Сообщение Aqua$erg Ср июл 18, 2012 19:08

Приветствую всех старожилов! Давненько я тут не засвечивался, а все потому, что давно не практиковал разные web-примочки, пользуясь простым хтмл-ом. Отсюда и проблема:

Нужен слой с определёнными размерами и отображением по центру окна браузера при открытии страницы в браузере. К тому же, сей слой нужно снабдить ссылками и ЯС - чтобы при кликах по ссылке и по "закрыть" слой убирался нахрен. Словом, нужно вот такое (включить всплывающее окно): http://beloostrov.ru но только в слое. В приведенном варианте все построено на хтмл+ЯС. Помогите благому делу, а то ведь сами знаете, как сейчас блокируются попапы... -08-
Аватара пользователя
Aqua$erg
Хронический Астматик
 
Сообщения: 1804
Зарегистрирован: Пт апр 11, 2003 8:12
Откуда: Питер

Re: Замена pop-up окна слоем - помогите

Сообщение Muerto Чт июл 19, 2012 9:42

Здоров! Я в последнее время юзаю плагины jquery серии jquerytools. Посмотри http://jquerytools.org/demos/overlay/external.html
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Re: Замена pop-up окна слоем - помогите

Сообщение Aqua$erg Пт июл 20, 2012 22:02

Muerto, пасиб пока на добром слове... Пытаюсь вникнуть в суть :|
Аватара пользователя
Aqua$erg
Хронический Астматик
 
Сообщения: 1804
Зарегистрирован: Пт апр 11, 2003 8:12
Откуда: Питер

Re: Замена pop-up окна слоем - помогите

Сообщение Aqua$erg Вс июл 22, 2012 20:16

Извиняйте, господа. Не разобрался :( Вроде бы, всё понятно, но не совсем, и я не победил.
Нет ли чего попроще?
Аватара пользователя
Aqua$erg
Хронический Астматик
 
Сообщения: 1804
Зарегистрирован: Пт апр 11, 2003 8:12
Откуда: Питер

Re: Замена pop-up окна слоем - помогите

Сообщение Jedi Пн июл 23, 2012 10:51

Есть такие скрипты которые открывают картинки в новом слое поверх сайта. Так вот более свежие версии таких скриптов могут открывать не только картинки но и другие страницы. Например http://www.jacklmoore.com/colorbox
Аватара пользователя
Jedi
Хронический Астматик
 
Сообщения: 1852
Зарегистрирован: Вс сен 08, 2002 0:01
Откуда: Russia

Re: Замена pop-up окна слоем - помогите

Сообщение Aqua$erg Пн июл 23, 2012 18:11

Да мне не нужны все эти красивости с "умным" анимированным слоем, от которых пухнет мозг и растёт размер скрипта. Нужен банальный html-код прямо в странице, который при открытии страницы делал бы слой (который, конечно, есть, но невидим и неактивен) активным и видимым, а в слое - нужный мне html, в контексте которого есть ссылка "закрыть" (вырубает слой) и то же самое, только ещё с переходом по href (с последним, думаю, и сам разберусь).

Весь этот геморр нужен ради ОДНОГО конкретного слоя с ОДНИМ конкретным содержимым и ОДНИМИ конкретными заданными вручную размерами. Ничего генерировать, считывать из базы и т.д. не нужно! Ради этого устанавливать мощный динамический скрипт по приведенным ссылкам - явный перебор.

Просто я в слоях - ни бум-бум... И в их видимости/активности. Хелп, а?.. Там блин, дело о благотворительности, а боюсь, народ не видит объявы из-за блокировки попапов (см. ссылку в стартовом посте)
Аватара пользователя
Aqua$erg
Хронический Астматик
 
Сообщения: 1804
Зарегистрирован: Пт апр 11, 2003 8:12
Откуда: Питер

Re: Замена pop-up окна слоем - помогите

Сообщение Muerto Ср июл 25, 2012 12:27

Aqua$erg
Эх, давай страницу, если это не главная страница белоострова (тогда сам код сниму) - я вставлю в неё нужный код. Но, клянусь бородой Йоды, - лучше использовать
мощный динамический скрипт
...
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Re: Замена pop-up окна слоем - помогите

Сообщение Aqua$erg Ср июл 25, 2012 17:39

Muerto, да, это главная страница Белоострова: http://beloostrov.ru/index.html В ней попап: http://beloostrov.ru/open.html
Вставь код и выложи лучше здесь, но если некорректно захламлять форум длинным кодом, то кидай на мыло
админ[собака]белоостров.ру

P.S. заранее спасибо.
Аватара пользователя
Aqua$erg
Хронический Астматик
 
Сообщения: 1804
Зарегистрирован: Пт апр 11, 2003 8:12
Откуда: Питер

Re: Замена pop-up окна слоем - помогите

Сообщение Aqua$erg Чт июл 26, 2012 20:08

...тем более, что и со вторым скриптом я не смог разобраться: что-то не так работает. Так что уж давайте по_колхозно_крестьянски
Аватара пользователя
Aqua$erg
Хронический Астматик
 
Сообщения: 1804
Зарегистрирован: Пт апр 11, 2003 8:12
Откуда: Питер

Re: Замена pop-up окна слоем - помогите

Сообщение Padonak Сб июл 28, 2012 23:17

грех-та какой... -02-
Uncaught TypeError: Изображение

Изображение
Аватара пользователя
Padonak
Философ-разговорник
 
Сообщения: 3872
Зарегистрирован: Вт дек 13, 2005 3:23
Откуда: Ростов-на-Дону

Re: Замена pop-up окна слоем - помогите

Сообщение Aqua$erg Пн июл 30, 2012 23:32

Muerto, если чего надумал, мыло моё, само собой, пиши по-аглицки, как настоящий латинянин :)
Аватара пользователя
Aqua$erg
Хронический Астматик
 
Сообщения: 1804
Зарегистрирован: Пт апр 11, 2003 8:12
Откуда: Питер

Re: Замена pop-up окна слоем - помогите

Сообщение Alkeeper Вт июл 31, 2012 8:45

Пиздец, вы, ребята, обленились совсем :)

Решение без jQuery. C jQ, конечно, кода будет поменьше.

Код: Выделить всё
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">

.fuckin-ads {
   width: 400px;
   height: 300px;
   padding: 10px;
   position: fixed;
   top: 50%;
   margin-top: -110px;
   left: 50%;
   margin-left: -210px;
   z-index: 999;
   background-color: #ebacca;
}

.close {
   color: red;
   position: absolute;
   top: 10px;
   right: 10px;
   z-index: 999;
}

</style>

<script type="text/javascript">

var popup_div = function(){
   var ourdiv = document.createElement('div');
   ourdiv.className = 'fuckin-ads';
   var closeButton = document.createElement('a');
   closeButton.innerHTML = "×";
   closeButton.title = "Закрыть окно";
   closeButton.className = 'close';
   closeButton.onclick = function(){
      ourdiv.style.display = 'none';
   };
   ourdiv.innerHTML = 'Ну тут тексты-картинки';
   ourdiv.appendChild(closeButton);
   document.getElementsByTagName('body')[0].appendChild(ourdiv);
}

window.onload = popup_div;

</script>
   
</head>
<body>
   
</body>
</html>
80 лет в интернете.
Аватара пользователя
Alkeeper
Экс-курильщик
 
Сообщения: 4183
Зарегистрирован: Вт ноя 13, 2001 1:01
Откуда: mweb

Re: Замена pop-up окна слоем - помогите

Сообщение Aqua$erg Вт июл 31, 2012 19:43

Парни! Ничего из вышеприсланного (даже то, что пытался послать в личку Padonak) - не работает нормально! Может, дело в инклюдах? В общем, я пробовал и копировать скрипты от jQ, пробовал и без них - по Алкиперосвкой шняге. Применительно к моему стремному html'у - НЕ РАБОТАЕТ!!!! Гляньте следующее:
http://beloostrov.ru/222.html - это скрипт Алкипера, пашет (коряво, но можно причесать)
http://beloostrov.ru/index2.html - вроде бы, вставлено то же, но не пашет
Аватара пользователя
Aqua$erg
Хронический Астматик
 
Сообщения: 1804
Зарегистрирован: Пт апр 11, 2003 8:12
Откуда: Питер

Re: Замена pop-up окна слоем - помогите

Сообщение Jedi Ср авг 01, 2012 8:44

Что не пашет? У меня в хроме всё пашет.
Аватара пользователя
Jedi
Хронический Астматик
 
Сообщения: 1852
Зарегистрирован: Вс сен 08, 2002 0:01
Откуда: Russia

Re: Замена pop-up окна слоем - помогите

Сообщение Aqua$erg Ср авг 01, 2012 19:15

Jedi писал(а):Что не пашет? У меня в хроме всё пашет.
Все да не все. Первая ссылка (Алкиперовский код) - в поряде. А применительно к коду целой страницы - пародия на слой в самом нижнем левом углу (см.скрин). Это хром. А ИЕ показывает в том же нижнем углу кусок розового слоя, но уже без всяких крестов и надписей
Вложения
bad_div.jpg
такой вот дурацкий див получается
Аватара пользователя
Aqua$erg
Хронический Астматик
 
Сообщения: 1804
Зарегистрирован: Пт апр 11, 2003 8:12
Откуда: Питер

Re: Замена pop-up окна слоем - помогите

Сообщение Aqua$erg Ср авг 01, 2012 20:42

В общем, победил - при помощи Падонка, который отписал в личку следующее:
Padonak писал(а):я так понял что у тебя там jQuery прицеплена к сайту? тогда проблемы нет. надо весь этот <div id='homer' из отдельного окна прописать в хтмл главной страницы но сделать ему style="display:none;position:absolute;". затем в башке документа надо прописать его появление и выравнивание по центру:

Код: Выделить всё
<head>
...
<script type="text/javascript">
$(document).ready(function(){
$('#homer').show(function(){$(this).css('z-index','500').css('top',( $(window).height()/2 -$(this).height()/2)+'px').css('left',( $(window).height()/2 -$(this).width()/2 )+'px');});
});
</script>
</head>


а вот это <a href="javascript:window.close();"><br>Х закрыть окно</a> заменить на:
<a href="#null" onclick="$('#homer').hide();"><br>Х закрыть окно</a>

Пришлось прикрутить в список скриптов и скрипт jQ, но теперь работает примерно так, как и хотелось: http://beloostrov.ru/index4.html

Так что, не совсем Вы, но с Вашей помощью (оба случая jQ таки помогли слеганца) справился. Спасибо всем! Падонку - как знатоку дивов - отдельный респект -01-
Аватара пользователя
Aqua$erg
Хронический Астматик
 
Сообщения: 1804
Зарегистрирован: Пт апр 11, 2003 8:12
Откуда: Питер

Re: Замена pop-up окна слоем - помогите

Сообщение Jedi Ср авг 01, 2012 23:24

Рекомендую у этого всплывающего дива сделать position: fixed; чтобы при прокрутке страницы он всегда был по центру
Аватара пользователя
Jedi
Хронический Астматик
 
Сообщения: 1852
Зарегистрирован: Вс сен 08, 2002 0:01
Откуда: Russia

Re: Замена pop-up окна слоем - помогите

Сообщение Alkeeper Чт авг 02, 2012 11:08

Aqua$erg писал(а):В общем, победил - при помощи Падонка, который отписал в личку следующее:
Padonak писал(а):я так понял что у тебя там jQuery прицеплена к сайту? тогда проблемы нет. надо весь этот <div id='homer' из отдельного окна прописать в хтмл главной страницы но сделать ему style="display:none;position:absolute;". затем в башке документа надо прописать его появление и выравнивание по центру:

Код: Выделить всё
<head>
...
<script type="text/javascript">
$(document).ready(function(){
$('#homer').show(function(){$(this).css('z-index','500').css('top',( $(window).height()/2 -$(this).height()/2)+'px').css('left',( $(window).height()/2 -$(this).width()/2 )+'px');});
});
</script>
</head>


а вот это <a href="javascript:window.close();"><br>Х закрыть окно</a> заменить на:
<a href="#null" onclick="$('#homer').hide();"><br>Х закрыть окно</a>

Пришлось прикрутить в список скриптов и скрипт jQ, но теперь работает примерно так, как и хотелось: http://beloostrov.ru/index4.html

Так что, не совсем Вы, но с Вашей помощью (оба случая jQ таки помогли слеганца) справился. Спасибо всем! Падонку - как знатоку дивов - отдельный респект -01-


Заебись вы победили.

А CSS часть я, видимо, в код шутки ради вставил — чисто потроллить.

Код: Выделить всё
<style type="text/css">

.fuckin-ads {
   width: 400px;
   height: 300px;
   padding: 10px;
   position: fixed;
   top: 50%;
   margin-top: -110px;
   left: 50%;
   margin-left: -210px;
   z-index: 999;
   background-color: #ebacca;
}

.close {
   color: red;
   position: absolute;
   top: 10px;
   right: 10px;
   z-index: 999;
}

</style>
80 лет в интернете.
Аватара пользователя
Alkeeper
Экс-курильщик
 
Сообщения: 4183
Зарегистрирован: Вт ноя 13, 2001 1:01
Откуда: mweb

Re: Замена pop-up окна слоем - помогите

Сообщение Aqua$erg Чт авг 02, 2012 13:47

Alkeeper писал(а):А CSS часть я, видимо, в код шутки ради вставил — чисто потроллить.
Я его вставил в main.css
Ну попробовал вставить в башку - один хрен.
Аватара пользователя
Aqua$erg
Хронический Астматик
 
Сообщения: 1804
Зарегистрирован: Пт апр 11, 2003 8:12
Откуда: Питер


Вернуться в Архив

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2

cron