«зависание» при нажатии

То, что я хочу, это довольно просто, и у меня есть два примера для него:«зависание» при нажатии

При взгляде на этом портфолио сайтов вы видите это прокрутка на основе веб-сайты в основном полагаясь на образы. Интерактивность, которую я ищу, - это щелчок по изображению, в результате чего элемент «зависания» над веб-страницей, дальнейшая разработка проекта с текстом, изображениями и т. Д. Что мне нравится в этом, так это то, что вам не нужно оставьте домашнюю страницу заглянуть в проект, и ее можно закрыть, нажав кнопку закрытия в правом верхнем углу или щелкнув где-нибудь вне этого элемента. Особенно на веб-странице Laucke-Sibein приятно, что когда вы прокручиваете достаточно далеко вниз, элемент исчезает.

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

источник

2015-10-02 Namrad

Добро пожаловать на переполнение стека! Пожалуйста, примите [тур], осмотритесь и прочитайте [помощь], в частности [* Как задать хороший вопрос?] (/ Help/how-to-ask). Содержание вашего вопроса должно ** в ** ваш вопрос, не связанный. Ссылки гниют, делая вопрос и его ответы бесполезными для людей в будущем, и людям не следует следовать какой-то случайной ссылке, чтобы помочь вам. Если вопрос не имеет смысла и на него нельзя ответить без ссылки, это не подходит для этого сайта. –

Это часто упоминается как лайтбокс, и есть [много] (https://www.google.com/search?q=jquery+lightbox) плагинов jQuery, которые делают это проще. – dave

Спасибо! Я думал, что лайтбоксы используются только для изображений. В двух приведенных примерах были ли они (оба) использованием элементов лайтбокса? – Namrad

Как уже упоминалось, есть много плагинов jQuery, таких как лайтбоксы, fancybox и т. Д., Которые способны выводить изображения и текст. Или будет работать диалоговое окно jquery-ui.

В качестве альтернативы вы можете создавать свои элементы портфеля внутри div и показывать их на событиях щелчка.

<body> 
    <div id="project-list"> 
     html showing images from your projects. <br /> 
     <img src="img1.jpg" data-project="project1" /> 
     <img src="img2.jpg" data-project="project2" /> 
    </div> 
    <div id="project1" class="project"> 
     html displaying <br /> 
     your project 1 
    </div> 
    <div id="project2" class="project"> 
     html displaying <br /> 
     your project 2 
    </div> 
</body>

Тогда CSS что-то вроде:

.project { position: absolute; top: 100px; left: 100px; display: none; } 

#project-list.fixed { position: static; }

Затем с помощью JQuery это будет выглядеть так:

$(function(){ 
    // add click handler to the images 
    $('#project-list img').click(function(e){ 
     // if a project is visible then just return and let the 
     // document click handler handle the closing of the project 
     if($('.project:visible').length > 0){ 
      return; 
     } 
     // get the data project attribute which tells you which project to open 
     var project = $(this).data('project'); 
     $('#' + project).slideDown('slow'); 
     // add the fixed class to the project list so that it doesn't scroll 
     $('#project-list').addClass('fixed'); 
     // you must have this to keep the click event from bubbling up 
     // through the DOM and triggering the document click function 
     // which would close the project as soon as it opens. 
     e.stopPropagation(); 
    }); 

    $(document).click(function(){ 
     // this closes the project when anything is clicked that doesn't 
     // have the event.stopPropagation function set. 
     $('.project').slideUp('slow'); 
     $('#project-list').removeClass('fixed'); 
    }); 

    $('.project').click(function(e){ 
     // you want this so if they click anything in the project it doesn't 
     // close the project. 
     e.stopPropagation(); 
    }); 
});

См скрипку здесь http://jsfiddle.net/wdv79yxw/1/

источник

2015-10-02 16:51:50

Sublime, это то, что я искал более или менее целый день. Большое спасибо Грегг! – Namrad

Рад помочь. Если это удовлетворит ваш ответ, отметьте его как правильный ответ. Хороший. –

Я хочу, но я начал замечать, что по какой-либо причине, если я открою эту скрипту в браузере, это не сработает. Сначала я попытался применить его к своему коду, но ответа не ответил. Я скопировал его прямо из jsfiddle, чтобы убедиться. Он выглядит точно так же, но без функциональности. Что я могу делать неправильно? – Namrad

Похоже, вы ищете модальное окно. Там есть множество библиотек jQuery или даже чистые решения для CSS. Порядочным, который я использовал, является jQuery fancybox, который поддерживает видео, iframes, контент, галерею изображений. Это очень здорово.

источник

2015-10-02 15:59:23 scridget

Я работал с fancybox раньше, и, безусловно, посмотрю на них снова, спасибо за комментарий. Я думал, что они в основном используются только для изображений. – Namrad

«зависание» при нажатии

ответ

Смежные вопросы