Как сделать так, чтобы окно внутри страницы появлялось после нажатия на ссылку? - PullRequest
Новая
       1

Как сделать так, чтобы окно внутри страницы появлялось после нажатия на ссылку?

0 голосов
/ 29 января 2011

Я хочу, чтобы изображение, которое при нажатии показывало другое изображение слева от экрана до точки на фоновом изображенииЗатем я хочу увеличить это изображение и сделать модальное окно видимым.Как я могу это сделать?

Точка на заднем плане должна оставаться неизменной.Когда я изменяю размер браузера, он должен появиться в той же точке.

1 Ответ

0 голосов
/ 29 января 2011

См. Рабочую демонстрацию следующего кода здесь.

Первая часть вашей проблемы может быть решена с помощью position:absolute в контейнере position:relative, который содержит ваше фоновое изображение. 

#wrapper {
    overflow-x:hidden;
    width:100%;
    position:relative;
}
#absSlide {
    width:100px;
    position:absolute; top:200px; right:-100px;
}

Убедитесь, что wrapper такой же ширины, как окно, и что overflow-x:hidden, чтобы слайд в div не был виден до щелчка. Слайд внутри будет располагаться сразу за сценой вправо и top:XXXpx, где XXX - это расстояние от верхней части страницы, где находится элемент фона. Ваш jQuery будет выглядеть примерно так, чтобы анимироваться в скрытом div при нажатии: 

$('#showSlide').click(function(e){
    e.preventDefault();
    $('#absSlide').animate({'right':0},450);
});

Вы должны иметь возможность изменить этот код так, чтобы он работал слева, и анимировать свойство left в jQuery. Я не хотел делать это слишком легко, поскольку ваш вопрос был очень общим. Вы должны задать отдельный вопрос для остальной части вашей проблемы после того, как вы поделитесь рабочим кодом для того, что вы можете реализовать в первой части.

...