javascript - radio 样式弹出框？

我需要创建一个非常类似于Rdio在其网站上执行此操作的弹出框。在Rdio上，当您单击用户的缩略图时，将出现一个弹出框，其中包含用户个人资料详细信息。我想知道如何才能完成这样的事情。我正在Ruby on Rails中开发我的网站。首先想到的是jQuery对话框。我还需要Ajax吗？有任何想法吗？

这是指向Rdio的链接。在右侧栏上，将鼠标悬停在用户缩略图上，然后单击向下箭头。弹出框将会出现。 http://www.rdio.com/#/artist/Kings_Of_Leon/album/Only_By_The_Night_1/

最佳答案

肯定有很多jQuery插件可以做到这一点。我自己远离他们，因为我感觉自己可以完全控制自己创造的一切。如果您想要最简单，最快的解决方案，我会说qTip是一个非常简单的解决方案。

http://craigsworks.com/projects/qtip/

否则，MIMIC在rdio站点上看到的基本概念是将每个用户缩略图包装在相对的div中，并给它第二个孩子以保存隐藏的绝对数据。您可以提供附加了用户ID的事物ID。然后，当查看器单击缩略图时，您可以使用ajax从php页面检索必要的HTML。

<div class="wrap relative">
  <div class="thumbnail" id="user_1"></div>
  <div class="hidden absolute" id="userinfo_1">user info will go here</div>
</div>

现在，一些简单的JS助您一臂之力。

$(document).ready(function(){
  $('.thumbnail').click(function(){
    // this will get the ID of the element and extract the user ID from it
    var id = $(this).attr('id').split('_').pop();

    // use ajax and send the user id to a page to retrieve HTML
    // and place this into the hidden info div and show it
    $.get(
      "getinfo.php",
      {"user_id" : id}
      function(data){
        $('#userinfo_'+id).html(data).show();
      }
    );
  });
});

显然，您将不得不考虑单击div来以某种方式重新隐藏用户信息。您可能会在php页面的HTML内制作一个X div，以自动隐藏它，但这将需要一些我现在不打算讨论的额外JS。

您还将需要使用top和left css属性将信息div放置在所需的位置。

这显然是一个非常简单的开始，但我希望它能激发您的想法。