CODEWITHSUNDEEP
jqueryhtmloverlay
qalbiol
qalbiol

Reputation: 475

jQuery multiple overlayed divs

i have the following jQuery code:

$(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();
        });
    });
})

Which shows an overlayed div, with the rest of the page blurred.

Works perfectly with:

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

My problem:

Inside the page I have many links which I want to behave just like first one. So, how can I implement something like:

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

And make the two or more of them work?

Something like:

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

This works partially, allows opening, but prevents overlay from closing ever again...

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

Obviously the sintax above is not correct, I have no idea on how to do it...

Thanks!!

Upvotes: 0

Views: 100

Answers (3)

Rajat Modi
Rajat Modi

Reputation: 1343

you can also use Qtip2 which is very highly customizable. you can find it here http://craigsworks.com/projects/qtip2/demos/#tips it is same as there are too many overlays on the same windows and also you can make them as per your requirement. Qtip2's documentation is here http://craigsworks.com/projects/qtip2/docs/

hope this will help.

Upvotes: 0

avladov
avladov

Reputation: 851

You do it this way:

$('[id^=showContent]')

This will select all elements which id begins with showContent.

Upvotes: 1

Prog Mania
Prog Mania

Reputation: 624

download this lib i've developed something like this and made it easy to use, just call the jloading() and jHide() methods https://github.com/gemy21ce/ajax-submit.git

Upvotes: 0

Related Questions