这是一直困扰我很久的问题,就是某些网站上是如何实现弹小窗口的?例如 douban.fm 上点击“登录”后弹出的登录小窗口,一直在google和百度上寻找未果,后以为是jQuery能够默认提供实现,学完后依然未果。望论坛内的大哥能告知,小弟将感激不尽。

解决方案 »

  1.   

    http://wed.7192.com/这个顶部有个切换城市的蓝色链接,你点击下。看是不是这样的效果!如果是,那下面就是代码:function getArea(pid){
    pid = parseInt(pid,10);
    if(!pid) $pid= 0 ;
    $.ajax({
    type : 'get',
    url : '/getarea.php?aid='+pid+'&r='+Math.random(),
    success : function(data){
    $('#display_area').empty();
    eval('var c='+data+';');
    for(k in c){
    var t = $('<a>'+c[k]+'</a>');
    (function(k,pid){
    if(pid){
    t.click(function(){
    $('#area_id').val(k);
    $('#p_city').val($(this).html());
    $('#p_city_p').val(pid);
    $('#p_city_c').val(k);
    $('#areawin').remove();
    $('#my_area').html($(this).html());
    window.location.href="search.php?act=area&dosubmit=zero&p_city_p="+pid+"&p_city_c="+k;
    });
    }else{
    t.click(function(){
    getArea(k);
    });
    }
    })(k,pid);
    t.appendTo($('#display_area'));
    }
    }
    });
    }
    function selectArea(e){
    if($('#areawin')){
    $('#areawin').remove();
    }
    getArea();
    var e = $(e),
    pos = e.position();
    var con = $('<div></div>'),sos=$('<div></div>'),tit = $('<div></div>'),nei = $('<div></div>');
    con.addClass('fwin')
    .css('display','none')
    .css('top',pos.top+10+e.height()+'px')
    .css('left',pos.left+'px')
    .attr('id','areawin');
    sos.addClass('fwin_soso').appendTo(con);
    tit.addClass('fwin_title').html('<img src="img/area_close.gif" onclick="$(\'#areawin\').remove();" style="cursor: pointer; float: right; margin-top: -3px;" />点击选择地区').appendTo(sos);
    nei.addClass('fwin_con').attr('id','display_area').appendTo(sos);
    con.appendTo($(document.body));
    con.show();
    }
      

  2.   

    首先感谢楼上的大哥,刚才看了下,不过不是这种效果,大哥可以去douban.fm看看(应该是和discuz的是一样的),貌似和大哥给的代码差不多,我觉得应该也是用div+js实现的。
      

  3.   

    jquery 的 弹出层插件.去看看jquery 然后看看 那些茫茫多的 弹出层ui 插件. Do(function(){            $('#fm-header .lnk-login').click(function(e){              e.preventDefault();              DBR.show_login();            });          });