Question

当你点击用户名时，有没有人能给我一个例子或一个好的地方开始寻找创建不打开新窗口的弹出窗口，例如在XenForo论坛上。它会弹出有关该用户的详细信息，但会在当前页面上显示，而不是新窗口。

链接查看效果，点击任意用户名：http://xenforo.com/community/

我想这是一些有趣的CSS内容，但我并不完全确定。所以任何帮助都会被指向正确的方向，谢谢！

编辑：事实上，想想看，它也是Lightbox所做的，没想到。

Answer 1

您可以使用jQuery UI Dialog。

Answer 2

这样的东西？

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;
}

Answer 3

Colorbox是另一个很好的插件：http://colorpowered.com/colorbox/

Web - 在当前窗口中弹出 - Lightbox-esque

3 个答案:

DEMO