单击时 'Hovering' 个元素

Question

我想要的很简单，我有两个例子：

在查看这些作品集网站时，您会发现它是基于滚动的网站，主要依靠图像。我正在寻找的交互性是点击图像，在网页上产生一个 'hovering' 元素，进一步用文本、图像等详细说明项目。我喜欢它的一点是，您不必离开主页就可以查看项目，而且可以通过按右上角的关闭按钮或单击该元素以外的任何地方来关闭它。尤其是在 Laucke-Sibein 的网页中，当您向下滚动足够远时，该元素会消失。

达到类似的结果有多难？这个功能是如何工作的？我一直在寻找整个下午，但未能找到对我有进一步帮助的东西。

Answer 1

听起来您正在寻找模态window。那里有大量的 jQuery 库，甚至是纯粹的 CSS 解决方案。我用过的一个不错的是 jQuery fancybox，它支持视频、iframe、内容和图片库。它非常坚固。

Answer 2

正如其他人提到的，有许多 jQuery 插件，如 lightbox、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();
    });
});

在这里看到一个 fiddle http://jsfiddle.net/wdv79yxw/1/

单击时 'Hovering' 个元素

'Hovering' elements when clicked

javascript

jquery

onclick

show

hide