| |
 3.8 Кб |
|
| | Подскажите, как реализовано наложение одного слоя поверх другого, например, "вконтакте"?
Когда кликаем, например, по рисункам, видео.. и.т.д. Задняя область затемняется, поверх выводится какая-то информация. При этом если информации много, то появляется вертикальная полоса прокрутки. Давайте сделаем какое-то универсальное решение? Прикрепляю свой пример. Минус в том, что если окно большое, то не закрывается при клике по нижним областям... Может, предложите какие-то другие более хорошие варианты. | |
| |
|
|
| |
|
|
| |
для: Jaroslav
(04.07.2014 в 15:33)
| | | Зачем изобретать велосипед? Все уже давно придумано - lightbox, litebox, thickbox, highslide и пр. | |
| |
|
|
| |
|
|
| |
для: elenaki
(04.07.2014 в 20:48)
| | | Мда? Как в lightbox закрыть окно про клике по любой области вне контента? Как настроить отступ сверху? Будет ли вертикальная полоса прокрутки если область большая по высоте?
___
речь не про фотогалереи и увеличение рисунков.. | |
| |
|
|
| |
|
|
| |
для: Jaroslav
(04.07.2014 в 21:05)
| | |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<style>
.over {
display:none;
top:0;
left:0;
background: rgba(0, 0, 0, 0.6);
height:100%;
position:fixed;
overflow:auto;
width: 100%;
z-index:1000;
}
.c {
margin:auto;
width:500px;
height:2000px;
border:1px solid red;
}
</style>
</head>
<body>
<div class="show">ЖМИ</div>
<div class="over">
<div class="c"></div>
</div>
<script>
$(function() {
$('.show').click(function(){
$('body').css('overflow','hidden');
$('.over').css('display', 'block');
});
});
$(function() {
$('.over').click(function(){
$('body').css('overflow','auto');
$('.over').css('display', 'none');
});
});
</script>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: iggipop
(04.07.2014 в 23:03)
| | | Как просто. Большое спасибо, этот вариант получше моего ))
_____
"background" - лучше задавать в виде: background: #cccccc;
Или указать прозрачный фоновый рисунок png. Иначе в IE8.0 - не работает.
А не подскажите, как сделать так, чтобы при клике внутри слоя "<div class="c"></div> " - окно не закрывалось? | |
| |
|
|
| |
|
|
| |
для: Jaroslav
(05.07.2014 в 10:19)
| | |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<style>
.over {
display:none;
position:fixed;
top:0;
left:0;
height:100%;
width: 100%;
background: rgb(0, 0, 0);
opacity:0.6;
filter: alpha(opacity=60);
overflow:auto;
z-index:1000;
}
.c {
margin:auto;
width:500px;
padding:15px;
background:#FFF;
}
</style>
</head>
<body>
<div class="show">ЖМИ</div>
<div class="over">
<div class="c">
Представители рода — наземные травянистые растения с колючим стеблем и листьями.
<p>
Многочисленные придаточные корни развиваются прямо в пазухах листьев, поглощая скапливающуюся там влагу.
</p>
<p>
Листья мясистые суккулентные (запасающие влагу), широколинейные, по краям колючезубчатые, длиной до 80 см[1], покрыты толстой эпидермой. Под эпидермой размещается слой крупных клеток водозапасающей ткани, в которой в период дождей накапливается влага. Внутри листа находится сеть воздушных каналов, окружённых хлорофиллоносными клетками. Таким образом, процессы газообмена у ананаса могут происходить даже при закрытых устьицах[2].
</p>
Когда розетка листьев сформирована, точка роста образует цветонос длиной до 60 см, густо покрытый обоеполыми цветками. Цветение длится 15—20 дней, и в результате образуется похожее на шишку мощное золотисто-жёлтое соплодие, представляющее собой множество завязей, сросшихся с прицветниками (кроющими листьями цветков) и осью соцветия[1]. На верхушке всегда развивается группа вегетативных листьев — «хохолок»[2].
Представители рода — наземные травянистые растения с колючим стеблем и листьями.
<p>
Многочисленные придаточные корни развиваются прямо в пазухах листьев, поглощая скапливающуюся там влагу.
</p>
<p>
Листья мясистые суккулентные (запасающие влагу), широколинейные, по краям колючезубчатые, длиной до 80 см[1], покрыты толстой эпидермой. Под эпидермой размещается слой крупных клеток водозапасающей ткани, в которой в период дождей накапливается влага. Внутри листа находится сеть воздушных каналов, окружённых хлорофиллоносными клетками. Таким образом, процессы газообмена у ананаса могут происходить даже при закрытых устьицах[2].
</p>
Когда розетка листьев сформирована, точка роста образует цветонос длиной до 60 см, густо покрытый обоеполыми цветками. Цветение длится 15—20 дней, и в результате образуется похожее на шишку мощное золотисто-жёлтое соплодие, представляющее собой множество завязей, сросшихся с прицветниками (кроющими листьями цветков) и осью соцветия[1]. На верхушке всегда развивается группа вегетативных листьев — «хохолок»[2].
Представители рода — наземные травянистые растения с колючим стеблем и листьями.
<p>
Многочисленные придаточные корни развиваются прямо в пазухах листьев, поглощая скапливающуюся там влагу.
</p>
<p>
Листья мясистые суккулентные (запасающие влагу), широколинейные, по краям колючезубчатые, длиной до 80 см[1], покрыты толстой эпидермой. Под эпидермой размещается слой крупных клеток водозапасающей ткани, в которой в период дождей накапливается влага. Внутри листа находится сеть воздушных каналов, окружённых хлорофиллоносными клетками. Таким образом, процессы газообмена у ананаса могут происходить даже при закрытых устьицах[2].
</p>
Когда розетка листьев сформирована, точка роста образует цветонос длиной до 60 см, густо покрытый обоеполыми цветками. Цветение длится 15—20 дней, и в результате образуется похожее на шишку мощное золотисто-жёлтое соплодие, представляющее собой множество завязей, сросшихся с прицветниками (кроющими листьями цветков) и осью соцветия[1]. На верхушке всегда развивается группа вегетативных листьев — «хохолок»[2].
</div>
</div>
<script>
$('.c').click(function(event) {
event.stopPropagation();
});
$(function() {
$('.show').click(function(){
$('body').css('overflow','hidden');
$('.over').css('display', 'block');
});
});
$(function() {
$('.over').click(function(){
$('body').css('overflow','auto');
$(this).css('display', 'none');
});
});
</script>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: iggipop
(05.07.2014 в 15:27)
| | | Благодарю. | |
| |
|
|
| |
|
|
| |
для: Jaroslav
(04.07.2014 в 21:05)
| | | и кстати там тоже во всяких плагинах есть css и еще настройки есть. | |
| |
|
|
| |
|
|
| |
для: iggipop
(04.07.2014 в 23:23)
| | | знаю, что есть. Но они неудобные )) Да и не хочется разную ерунду подключать.
Ваш пример (выше) замечательный. То, что надо. | |
| |
|
|
| |
|
|
| |
для: Jaroslav
(05.07.2014 в 10:23)
| | | Пример выше безграмотный, не повторяйте таких глупостей. Изучайте, для "просто написать", это не сложно. | |
| |
|
|
| |
|
|
| |
для: confirm
(07.07.2014 в 02:42)
| | | обоснуйте | |
| |
|
|
| |
|
|
| |
для: iggipop
(07.07.2014 в 03:45)
| | | А что обосновывать? По ссылке, изучать, вникать, а не писать конструкции, о которых у вас весьма поверхностные понятия, судя по вашему коду. | |
| |
|
|
| |
|
|
| |
для: confirm
(07.07.2014 в 03:48)
| | | уважаемый
вместо того чтоб "отсылать" вникать во все что не поподя особенно если не "иметь" системы представлений, а представления у всех различны, шину можно накачать используя легкие, ручной нанос, гидравлическую систему....
могли быт и написать что-то хотя бы вроде этого
$(function() {
$('.show').click(function(){
$('.over').css('display', 'block');
});
});
$('.over').click(function(e){
if ($(e.target).parents().filter('.over:visible').length != 1) {
$('.over').hide();
}
});
|
| |
| |
|
|
| |
|
|
| |
для: iggipop
(07.07.2014 в 04:19)
| | | Хотите писать код? Будьте добры изучать язык. Жить на подсказках, это не лучший метод, а читать и изучать предмет, это не унижение.
Вы влепили в страницу целую портянку, которая будучи обрамленная тегом PRE делает этот пост трудно читаемым, а хватило бы и одного символа в строках. Не из приятных читать такие посты и разбираться в них. Я просто вижу, что вместо кода у вас простое перечисление конструкций, отсюда и замечание. Что вы там пытаетесь вторым кодом сделать, мне не ведомо, а вот его то бы надо было как раз и форматировать. | |
| |
|
|
| |
|
|
| |
для: confirm
(07.07.2014 в 04:48)
| | | реализовать закрытие блока можно по-разному.
как обработать нажатие сугубо на самом элементе (который закрывают не задействовав дочерний) так и тупо отменить распространения события при нажатии на дочерний (stopPropagation())
не понимаю в чем ваша блин проблема....!
давайте поспорим что первый мною указанный вариант "перечисление конструкций", любитель вы наш написания кода.... а давайте класс забабацаем на все случаи жизни, а?
давайте еще расскажите как не хорошо .css использовать в jq и все прочее
простой пример - нажали на элемент - показали блок - нажали на блок - скрыли блок - нажали на дочерний - игнорировали событие.
демогог блин. | |
| |
|
|
| |
|
|
| |
для: iggipop
(07.07.2014 в 05:12)
| | | Вот что "демагог" - дважды объявлять $(function() { });, это либо глупость, либо полное непонимание, что это такое. И при этом, при двойном объявлении, навешивать обработчик ВНЕ onload, ну это вообще...
Это что код по вашему? Это просто незнание предмета и полная безграмотность. Все остальные рассуждения о CSS и прочем, это уже просто базар на фоне таких ляпов (в JS нет классов, да будь это вам известно). | |
| |
|
|
| |
|
|
| |
для: confirm
(07.07.2014 в 05:20)
| | |
дважды объявлять $(function() { });, это либо глупость, либо полное непонимание, что это такое.
|
да ладна http://www.learningjquery.com/2006/09/multiple-document-ready/
ну соглашусь что избыточно, и поправимо
можете считать, что подгружаются несколько js с .ready
и у вас какие то крайности - либо дурак либо тупой. я даже не знаю что выбрать.
навешивать обработчик ВНЕ onload
|
а вот здесь по подробнее. | |
| |
|
|
| |
|
|
| |
для: iggipop
(07.07.2014 в 07:28)
| | | Ну если вы не дурак, то значит сами способны проанализировать, то чего написали. | |
| |
|
|
| |
|
|
| |
для: confirm
(07.07.2014 в 12:04)
| | | мне не понятна формулировка "вне onload"
напишите уже | |
| |
|
|
| |
|
|
| |
для: iggipop
(07.07.2014 в 12:40)
| | | А вы еще хотели, чтобы я обосновал.
Клиент дело тонкое, Петруха, и уж коли хотите писать, то полезно бы знать, что jQuery, это не подмена JS, и написана не специально для "тупых", а для понимающих процессы на клиенте, и знание первоисточника, это более даже, чем желательно.
Мне, дураку, видимо не получится объяснить, а посему изучайте:
http://javascript.ru/tutorial/events
http://jquery.page2page.ru/index.php5/%D0%9E%D0%B1%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA_%D0%B3%D0%BE%D1%82%D0%BE%D0%B2%D0%BD%D0%BE%D1%81%D1%82%D0%B8_%D0%B4%D0%B5%D1%80%D0%B5%D0%B2%D0%B0_DOM
И когда изучите, тогда и попробуйте для себя обосновать, почему сперва установка обработчика прописана вне события загрузки документа, что может работать только при определенных условиях, а далее каждая установка "любовно" обрамлена этим. Я лишь могу оценивать это как непонимание того, что вы написали. Все. | |
| |
|
|
| |
|
|
| |
для: confirm
(07.07.2014 в 13:31)
| | | мдэ.........................
это что-то из серии "почему без шапки".
сами знаете function(){} который у меня аж 2 раза! = .ready()
так же код вставлен в футер страницы из известных соображений не касающихся jq
Замечание: конечно, если подготовительные действия требуют наличия таких элементов как картинки, правильным будет полагаться на событие load. Однако, имейте ввиду, что одновременное использование .ready() и <body onload="..."> приведет к ошибке. Если вам необходимо использовать оба события, используйте метод библиотеки jQuery .load(), вместо <body onload="...">.
|
свое " может работать только при определенных условиях" оставьте себе.особенно отталкиваясь от "описания" задачи ТС.
работать оно будет всегда.
такое ощущение что вы пытаетесь поднимать свой авторите за счет опускания других.
извините но такое ощущение.... реально "почему без шапки"..... если знаете этот анекдот.
успехов. | |
| |
|
|
| |
|
|
| |
для: iggipop
(07.07.2014 в 13:46)
| | | Изучайте, а не порите чепухи, а тем более не предлагайте такой бред кому либо. | |
| |
|
|
| |
|
|
| |
для: confirm
(07.07.2014 в 13:51)
| | | я то смотрю 2/3 инета кишит такой "чушью"
отродясь onload в jq не видел
расскажите еще что мой обработчик в конце файла загрузится раньше чем див с надписью "нажать"
вы приколист.
ищите дальше свои "специальные" условия в которых оно типа только и работает.
вы жёсткий педант очевидно же.
скажите, а вас не беспокоит когда предметы лежать не симметрично ? когда числа не заканчиваются на 0 и 5 ? | |
| |
|
|
| |
|
|
| |
для: iggipop
(07.07.2014 в 14:01)
| | | >отродясь onload в jq не видел
Это потому, что вы даже понятия не имеете, что такое jQuery.
>вы приколист.
Воистину нужно быть приколистом, чтобы писать код так, как вы его пишите. И аргументы ваши при этом, это пустота. Читая понос словесный, что вы тут пишите о симметричности и ..., могу лишь предположить, что вы еще дитя.
Учите Javascript и только потом беритесь за jQuery и прочите библиотеки. Пишите код как логическую структуру, а не как песнь чукчи. Короче, нужно изучать и понимать, иначе не предлагайте бедлама, это как минимум смешно.
Я это говорю не потому, чтобы вас пригвоздить, и не растопыриваю пальчики, что вы тут делаете, а потому, что это в ваших же интересах. | |
| |
|
|
| |
|
|
| |
для: confirm
(07.07.2014 в 14:10)
| | | если вы не уяснили - мне понятно о чем речь и как "нужно"
далее...
могли бы писать примеры в "идеале" и не стоит разводить панику изза отсутсвия некоторых мелочей.
вообще хорошо было бы чтоб задающие вопросы вообще хоть что-то понимали в предмете вопросаrnи если им не написали все с рюшечками - извините - на копировали вставили - работает - пусть вникают. а людей которые "создают" используя тупо "как подсказали" - никто не уважает.
у вас подход примерно такой - 1 раз и навсегда - вы вообще чем зарабатываете?
написанием "охренных сайтов" по всем правилам???
забавно.
видимо вы работаете в студии артемия лебедева чей слоган все объясняет "долго - дорого - ох... но"
клиент платит не за логистику в коде. люди пишут порталы - "как умеют" - люди покупают движки - "как сделали" - и получают деньги за предоставления информации или торговлю.
послушав вас - главное это не результат и прибыль - а искусно преподнести код, который нафиг никому ненужен. вы наверно себя сравниваете с художником - наслаждаясь каждой строкой своего кода.....
ну чтож удачи.
PS и реально уважаемый Вы очень долго будете искать ту ситуацию при которой обработчик загрузится ранее DOM элементов.... более того в документации все объяснено когда что используют. поэтому лечить меня что это "не рабочий" код не надо. | |
| |
|
|
|
