Вместо того, чтобы Lightbox был на вершине всего, сделайте его относительным и опустите все вниз

Question

Вместо того, чтобы Lightbox был на вершине всего, сделайте его относительным и опустите все вниз

0

Вместо того, чтобы вводить точный код, я хочу задать концептуальный вопрос html/css/js. Обычно лайтбокс работает, помещаясь поверх всего на странице с помощью z-индекса. Что, если вы не хотите, чтобы лайтбоксы были поверх всего остального? Но вместо этого снимите нижний колонтитул, чтобы освободить место для нового контента. Чувство моего чувства говорит мне, что если вы создадите тот же z-индекс и сделаете позиционный родственник, он должен вытолкнуть все остальные div. Однако это не совсем работает.

Я пытаюсь добиться следующего: пользователь нажимает миниатюру, которая подталкивает нижний колонтитул и открывает новый div по центру страницы с некоторым контентом. Если они решили нажать "X", он закрывает div, возвращается назад к оригинальному миниатюре, перемещая нижний колонтитул обратно вверх по странице.

Я думал, используя лайтбокс, и изменение кода будет самым быстрым и простым способом. Однако, возможно, я ошибаюсь. Есть предположения?

Спасибо.

RHK-S8 14 май 2014, в 03:33

Источник

Теги:

html

css

lightbox

1 ответ

Ещё вопросы

Sammy · Accepted Answer · 2014-05-13T23-33-00.000Z

1

Лучший ответ

z-index используется только для элементов, которые сложены друг на друга. Это не похоже на то, что вы пытаетесь достичь.

Вам нужно поместить лайтбокс между нижним колонтитулом и содержимым и сначала установить его скрытие, и всякий раз, когда пользователь нажимает на thumnail, показывается модальный с javascript/jquery:

$(".thumb").click(function(){
    $(".modal").slideToggle()
})

Здесь простая демонстрация:

играть на скрипке

Sammy 13 май 2014, в 23:33

0

Это выглядит так, как я хочу, спасибо за ваше объяснение и демонстрацию. Не могли бы вы дать хороший совет по поводу эффектов? Как это медленно появляется, как хорошее движение? Я отмечу этот ответ как ответ в ближайшее время.
RHK-S8 14 май 2014, в 01:03
0

@ RHK-S8 Я думал, что ты хочешь, чтобы над твоим контентом лежало всплывающее окно, а нижний колонтитул опускался вниз? Думаю нет.
Drazen Bjelovuk 14 май 2014, в 01:19
0

@JoshBjelovuk Это не делает это всплывающее окно, вы правы, я смотрел на другие сайты, и они, казалось, использовали лайтбоксы для создания этих эффектов. Однако это казалось сложным способом достижения чего-то простого, поэтому я объяснил свою конечную цель, чтобы посмотреть, есть ли более простые решения.
RHK-S8 14 май 2014, в 01:22
0

@JoshBjelovuk Я пытался сделать что-то похожее на этот сайт bnz.co.nz , на главной странице которого есть плитки, и при нажатии открывается лайтбокс, который заменяет большую часть контента на странице. т.е. толкает все это вниз.
RHK-S8 14 май 2014, в 01:24
0

@ RHK-S8 А, на самом деле это не всплывающее окно. Больше расширяющегося дива, но я вижу, к чему ты сейчас шел.
Drazen Bjelovuk 14 май 2014, в 01:34
0

Вы можете использовать slideToggle () для эффекта скольжения. Я обновил свой код
Sammy 14 май 2014, в 01:51

Показать ещё 4 комментария