CODEWITHSUNDEEP
javascriptjquerycss
Crimsonfox
Crimsonfox

Reputation: 422

Web - Pop up in current window - Lightbox-esque

Could anyone give me an example or a good place to start looking on creating pop-ups that don't open new windows, for example on the XenForo forums, when you click a username. It pops up with details about that user but over the current page as opposed to a new window.

Link to see effect, click on any username: http://xenforo.com/community/

I imagine it's some interesting CSS stuff but I'm not entirely sure. So any help would be appreciated to point me in the right direction, thanks!

Edit: In fact, come to think of it, it's what Lightbox does as well, didn't think of that.

Upvotes: 1

Views: 631

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

Something like this?

DEMO

$('#members_info p').each(function() {
    var memID = $(this).text().split('|')[0]; // get member ID
    $(this).addClass(memID);
});

$('.user').click('click', function() {
    $('#info').html('');

    var mem = $(this).attr('class').split(' ')[1];
    var infoe = $('#members_info p.' + mem);
    var info = infoe.text().split('|');


    var id = info[0];
    var name = info[1];
    var birth = info[2];
    var location = info[3];
    var job = info[4];
    var about = info[5];

    $('#cover').show();
    $('#info').fadeTo(600,1).html('<div id="infoClose">X</div>  <img src="http://dummyimage.com/50x50/f0f/fff&text=+"><b>' + name + '</b> <i>( ' + job + ' ) </i><br>' + location + ' ' + birth + ' <br><hr><br>' + about);
});

$('#infoClose').live('click',function(){
    $('#info').fadeTo(600,0,function(){
        $('#cover').hide();
    });
});

.

<div id="cover">
        <div id="info">       
        </div>
</div>

<a href="#" class="user 001">username: <span>George</span></a>
<a href="#" class="user 002">username: <span>Mary</span> </a>
<a href="#" class="user 003">username: <span>Alfredo</span> </a>
<a href="#" class="user 004">username: <span>Luisa</span> </a>


    <!-- whatever is returned by your server... i'll use HTML + '|' to split -->
    <div id="members_info" style="display:none;">
        <p>001|George|12/06/1980|NY, US|Architect,Musician|I love building stuff, I have a beautiful girl and a son</p>
        <p>002|Mary|12/06/1980|ZG, HR|Student|I love to study and read books.</p>
        <p>003|Alfredo|12/06/1980|TO, IT|Artist|Engage me! :D</p>
        <p>004|Luisa|12/06/1980|SY, AU|Programmer|I love to code...</p>   
    </div>

.

body{
    background:#eee;
    padding:0px;
    margin:0px;
    font-family:Arial;
}

.user{
    text-decoration:none;
    color:#444;
    display:block;
}
.user span{
    font-weight:bold;
    color:#3c2;
}
.user span:hover{
    font-weight:bold;
    color:#7d4;
}



#cover{
    display:none;
    position:absolute;
    padding:0px;
    margin:0px;
    width:100%;
    height:100%;
    z-index:2000;
}
#info{
    display:none;
    background:#000;
    color:#fff;
    width:230px;
    height:130px;
    padding:20px;
    position:relative;
    z-index:2010;
    margin:100px auto;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 0px 0px 5px 5px #000;
    -moz-box-shadow: 0px 0px 5px 5px #000;
    box-shadow: 0px 0px 5px 5px #000;
    border:1px solid #ddd;
}
#info img{
    float:left;
    margin:0 10px 10px 0;
}
#infoClose{
    cursor:pointer;
    background:#f00;
    position:absolute;
    right:-6px;
    top:-6px;
    z-index:2005;
    height:26px;
    width:26px;
    line-height:26px;
    text-align:center;
    border:1px solid #eee;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    -webkit-box-shadow: 0px 0px 5px 5px #000;
    -moz-box-shadow: 0px 0px 5px 5px #000;
    box-shadow: 0px 0px 5px 5px #000;
}

Upvotes: 2

David
David

Reputation: 2331

Colorbox is another good plugin for doing this: http://colorpowered.com/colorbox/

Upvotes: 0

SLaks
SLaks

Reputation: 887415

You can use jQuery UI Dialog.

Upvotes: 2

Related Questions