Страница 1 из 1

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

СообщениеДобавлено: Ср июл 18, 2012 19:08
Aqua$erg
Приветствую всех старожилов! Давненько я тут не засвечивался, а все потому, что давно не практиковал разные web-примочки, пользуясь простым хтмл-ом. Отсюда и проблема:

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

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

СообщениеДобавлено: Чт июл 19, 2012 9:42
Muerto
Здоров! Я в последнее время юзаю плагины jquery серии jquerytools. Посмотри http://jquerytools.org/demos/overlay/external.html

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

СообщениеДобавлено: Пт июл 20, 2012 22:02
Aqua$erg
Muerto, пасиб пока на добром слове... Пытаюсь вникнуть в суть :|

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

СообщениеДобавлено: Вс июл 22, 2012 20:16
Aqua$erg
Извиняйте, господа. Не разобрался :( Вроде бы, всё понятно, но не совсем, и я не победил.
Нет ли чего попроще?

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

СообщениеДобавлено: Пн июл 23, 2012 10:51
Jedi
Есть такие скрипты которые открывают картинки в новом слое поверх сайта. Так вот более свежие версии таких скриптов могут открывать не только картинки но и другие страницы. Например http://www.jacklmoore.com/colorbox

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

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

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

Просто я в слоях - ни бум-бум... И в их видимости/активности. Хелп, а?.. Там блин, дело о благотворительности, а боюсь, народ не видит объявы из-за блокировки попапов (см. ссылку в стартовом посте)

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

СообщениеДобавлено: Ср июл 25, 2012 12:27
Muerto
Aqua$erg
Эх, давай страницу, если это не главная страница белоострова (тогда сам код сниму) - я вставлю в неё нужный код. Но, клянусь бородой Йоды, - лучше использовать
мощный динамический скрипт
...

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

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

P.S. заранее спасибо.

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

СообщениеДобавлено: Чт июл 26, 2012 20:08
Aqua$erg
...тем более, что и со вторым скриптом я не смог разобраться: что-то не так работает. Так что уж давайте по_колхозно_крестьянски

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

СообщениеДобавлено: Сб июл 28, 2012 23:17
Padonak
грех-та какой... -02-

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

СообщениеДобавлено: Пн июл 30, 2012 23:32
Aqua$erg
Muerto, если чего надумал, мыло моё, само собой, пиши по-аглицки, как настоящий латинянин :)

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

СообщениеДобавлено: Вт июл 31, 2012 8:45
Alkeeper
Пиздец, вы, ребята, обленились совсем :)

Решение без 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>

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

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

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

СообщениеДобавлено: Ср авг 01, 2012 8:44
Jedi
Что не пашет? У меня в хроме всё пашет.

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

СообщениеДобавлено: Ср авг 01, 2012 19:15
Aqua$erg
Jedi писал(а):Что не пашет? У меня в хроме всё пашет.
Все да не все. Первая ссылка (Алкиперовский код) - в поряде. А применительно к коду целой страницы - пародия на слой в самом нижнем левом углу (см.скрин). Это хром. А ИЕ показывает в том же нижнем углу кусок розового слоя, но уже без всяких крестов и надписей

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

СообщениеДобавлено: Ср авг 01, 2012 20:42
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-

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

СообщениеДобавлено: Ср авг 01, 2012 23:24
Jedi
Рекомендую у этого всплывающего дива сделать position: fixed; чтобы при прокрутке страницы он всегда был по центру

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

СообщениеДобавлено: Чт авг 02, 2012 11:08
Alkeeper
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>

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

СообщениеДобавлено: Чт авг 02, 2012 13:47
Aqua$erg
Alkeeper писал(а):А CSS часть я, видимо, в код шутки ради вставил — чисто потроллить.
Я его вставил в main.css
Ну попробовал вставить в башку - один хрен.