Question

我有以下jQuery代码：

$(document).ready(function() {
    $('#showContent').click(function(e) {
        e.preventDefault();
        $("body").append("<div id='lyricsOverlay'></div>");
        $("#lyricsOverlay").height($(document).height()); 
        $('#lyrics').show();
        $('#lyricsOverlay').click(function() { 
            $('#lyrics').hide();
            $('#lyricsOverlay').remove();
        });
    });
})

显示重叠的div，页面的其余部分模糊。

与以下内容完美配合：

<a href="#" id="showContent">Lyrics...</a>

我的问题：

在页面内部，我有许多链接，我想表现得像第一个。那么，我该如何实现类似的东西：

<a href="#" id="showContent0">Lyrics...</a>
<a href="#" id="showContent1">Lyrics...</a>
...

让两个或两个以上的人工作？

类似的东西：

**i = GET i from the link?** 
$('#showContent.**i**').click(function(e) {

这部分工作，允许打开，但防止叠加再次关闭......

$((this)).click(function(e) {

显然上面的sintax不正确，我不知道怎么做......

谢谢！

Answer 1

你这样做：

$('[id^=showContent]')

这将选择id以showContent开头的所有元素。

Answer 2

下载此lib我开发了类似这样的内容并使其易于使用，只需调用jloading()和jHide()方法 https://github.com/gemy21ce/ajax-submit.git

Answer 3

你也可以使用高度可定制的Qtip2。你可以在这里http://craigsworks.com/projects/qtip2/demos/#tips找到它，就像在同一个窗口上有太多的叠加层一样，你也可以按照你的要求制作它们。 Qtip2的文档在http://craigsworks.com/projects/qtip2/docs/

希望这会有所帮助。

jQuery多重叠加的div

3 个答案: