如何制作类似Facebook的通知？

Question

，请阅读所有的问题，然后再思考错误的事情。

​

​

我正在尝试实现一个类似的Facebook通知系统，但是我需要一些帮助来设计它。我已经做好了通知，后端运行得很完美，但是我正在为样式使用一个解决方案，而truste me，这是缓慢的，丑陋的，不能为我提供一个很好的方式来设计源代码。

我高高兴兴地谈论的是“用户单击通知”和“用户接收加载通知”之间的操作。我说的是这部分的风格。比如“我如何用加载的通知打开一个盒子？”单击/div/image/text按钮后。

好吧，我们继续说吧。现在我使用Fancybox创建我的通知框-是的，FANCYBOX！以下是在单击“通知”按钮(“0”)后使用Fancybox获得的可视化信息：

​

​

这对你来说可能很美，但对我来说却是丑陋的--这真的非常慢。为了解决这个问题，我禁用了Fancybox的图像，所以当它加载时，它会加载没有黑色背景的"X“来关闭窗口和其他东西。以下是我的密码。

报头部分响应：

<!-- This is the html generated by Ruby on Rails,number is dynamic-->
<a href="/notifications/index" class="various fancybox.ajax">0</a>

<script>
  $(document).ready(function(){
    $(".various").fancybox({
      openEffect: 'none',
      closeEffect: 'none',
      prevEffect: 'none',
      nextEffect: 'none',
      fitToView : false,
      autoSize: false,
      scrolling: 'auto',
      maxWidth:300,
      maxHeight:500,
      padding: 0,
      leftRatio: 0.86,
      topRatio: 0.18
    });
  });
</script>

这是生成通知/索引/(用于实际示例)的HTML：

<div class="post group">
        <div class="notifications-content">
        <div class="group" id="notification-0">
        <div class="post-middle">
          <div class="notifications-title">
            <b>Bruno postou:</b>
          </div>
          <div class="post-middle-text">
               ADO
          </div>
          <div class="post-middle-actions with-dots">
            <label> Postado às 12:34 de 17 de October</label>
          </div>
        </div>
        </div>
        </div>

        <div class="notifications-content">
        <div class="group" id="notification-1">
        <div class="post-middle">
          <div class="notifications-title">
            <b>Fernando Paladini postou:</b>
          </div>
          <div class="post-middle-text">
              hummmmmmmmm #boilo
          </div>
          <div class="post-middle-actions with-dots">
            <label> Postado às 12:36 de 17 de October</label>
          </div>
        </div>
        </div>
        </div>

        <div class="notifications-content">
        <div class="group" id="notification-2">
        <div class="post-middle">
          <div class="notifications-title">
            <b><a href="#">@Ramon Diogo</a> postou:</b>
          </div>
          <div class="post-middle-text">
              http://www.youtube.com/watch?v=A3zPI-DBf7U
          </div>
          <div class="post-middle-actions with-dots">
              <label></label>
              <label>Comentado às 12:47 de 17 de October</label>
          </div>
        </div>
        </div>
        </div>
</div>

我怎么能用HTML，CSS和jQuery / JS来实现呢？我的意思是，当单击按钮打开一个带有加载内容的“框”时，当单击“out”关闭"box“时，会产生这种效果。我真的真的不知道怎么做这个。实际上，我正在使用Fancybox打开一个模式，但我不想打开一个模型，我想让它像Facebook和Trello这样的网站--只有css/jquery。

注意到，我没有要求代码，我需要帮助，因为我没有任何想法如何做到这一点。我要说明:我需要做什么时，点击按钮，打开通知框。或单击“外部通知”框时，关闭通知框。这背后的概念，但我会考虑，如果你也张贴一些代码，因为这将有助于我的学习。

Answer 1

您可以在包含通知的div上进行绝对定位。

它应该隐藏为默认行为，并在使用javascript单击时使其可见。

这将帮助您：http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery/，但您应该更改行为，以响应单击事件，而不是mouseenter (脚本部分第14行)。将该部分替换为以下内容：

$(this).click(function(e) {  
    $(this).find("ul").stop(true, true).slideDown();
    e.preventDefault();
});  

注意"preventDefault部件？？这是为了避免浏览器在单击时输入链接。