尋找一個通知系統

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title></title> 

     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 

     <script type="text/javascript"> 
      $(document).ready(function() { 
       $("#notifications").hide(); 

       var height = 0; 
       var count = 0; 

       $("#show").click(function() { 
        count += 1; 

        $("#notifications").append("<div class='notification' id='n" + count + "'><span>notification " + count + "</span><input type='button' class='notification_button' id='b" + count + "' value='x' /></div>").show(); 

        height += $("#n" + count).height(); 

        $("#content").css("padding-top", height + "px"); 
       }); 

       $(":button.notification_button").live('click', function() { 
        var number = parseInt($(this).attr("id").substring(1)); 

        height -= $("#n" + number).height(); 

        $("#content").css("padding-top", height + "px"); 

        $("#n" + number).remove(); 
       }); 
      }); 
     </script> 

     <style type="text/css"> 
      body { 
       padding:0px; 
       background-color:#00ff00; 
      } 

      #notifications { 
       background-color:#ff0000; 
       z-index:9999999; 
       position:fixed;top:0px;left:0px; 
       width:100%; 
      } 

      .notification { 
       height:35px; 
      } 

      .notification_button { 
       float:right; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="notifications"></div> 

     <div id="content"> 
      <input type="button" id="show" value="show" /><br /><br /> 

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla metus nibh, sit amet posuere lectus. Donec neque elit, tristique eget aliquet a, sagittis ut massa. In vestibulum pellentesque massa sit amet ullamcorper. In eget diam eros, non volutpat purus. Maecenas aliquam ultricies tristique. Aliquam venenatis laoreet lectus et molestie. Fusce adipiscing molestie urna, sit amet fringilla sem ornare eu. Phasellus a felis ac quam consectetur scelerisque nec vitae est. In posuere malesuada aliquet. Nulla ultrices vulputate nisl et ullamcorper. Aliquam erat volutpat. Cras tortor justo, porta vitae eleifend sed, egestas non purus. Nullam massa odio, dapibus vitae hendrerit at, dictum et ante. Quisque condimentum justo eu arcu sodales vitae auctor massa aliquet. Vivamus tristique suscipit sem, id venenatis velit convallis id. Phasellus sit amet magna ut augue aliquam porttitor.</p> 

      <p>Sed vitae mauris nulla, at sagittis tellus. Proin dapibus congue massa non rutrum. In orci nulla, auctor vitae hendrerit id, mollis quis enim. Mauris blandit libero sed risus vulputate ornare vitae nec sapien. Sed eu ligula ut nulla faucibus sagittis non ac libero. Suspendisse laoreet bibendum consequat. Duis enim massa, rutrum ut iaculis quis, dignissim et neque. Quisque ac est felis, vel dapibus erat. Nulla facilisi. Nulla eros augue, ornare sit amet adipiscing vel, interdum ac dui. Aliquam orci risus, interdum cursus tincidunt quis, euismod sit amet sapien. Vivamus sollicitudin tempus risus, in ullamcorper lectus sagittis non. Phasellus nec gravida ante. Mauris vitae quam a nisl ornare rutrum.</p> 

      <p>Aliquam id neque ut dui placerat tincidunt. Nunc feugiat arcu sed risus dictum lacinia. Proin at purus eros. Sed adipiscing tincidunt nulla vitae molestie. Quisque sapien magna, molestie placerat tincidunt ut, porta eget arcu. Aliquam facilisis faucibus justo, ut placerat massa sagittis ut. Quisque ullamcorper lacinia tellus, nec mattis augue euismod sit amet. Nunc tristique congue odio ut consequat. Cras eget orci sed erat ullamcorper consectetur. Phasellus blandit, neque sit amet varius bibendum, ipsum purus vehicula tellus, at eleifend tortor turpis interdum erat. Quisque faucibus posuere accumsan. Fusce sem ipsum, tempus vel pharetra eleifend, scelerisque at justo. Nulla risus eros, faucibus iaculis sagittis nec, ultricies hendrerit neque.</p> 

      <p>Curabitur neque dolor, convallis in tempor eget, ultricies a massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed varius felis ut leo vehicula vehicula. Phasellus tellus mi, pretium ac vehicula non, convallis sed turpis. Nullam at auctor neque. Proin ac orci vel mauris mollis suscipit nec eget felis. Phasellus vel laoreet enim. Sed at mi in est feugiat suscipit non non mauris. Suspendisse vel enim lorem, et scelerisque quam. Aenean elementum elementum mi, quis dignissim dui rhoncus et. Integer viverra luctus vulputate. Maecenas nisi libero, pharetra id vestibulum eget, dignissim elementum ipsum. Vivamus quis eros nibh, in commodo ligula. Integer mi odio, fringilla sit amet sagittis sit amet, congue eget dui. Maecenas sollicitudin ante a nulla placerat congue. Integer interdum posuere diam a fringilla. Aenean accumsan orci nec sem aliquam elementum. Sed in quam eu urna lobortis eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> 

      <p>Mauris pulvinar, nisi vitae facilisis fermentum, mi eros ultricies ipsum, non lacinia nunc turpis vel tortor. Nunc vel sapien ut diam porttitor euismod at quis tortor. Aenean quis lacus id dolor luctus eleifend in id arcu. Suspendisse potenti. Duis dui libero, dictum quis elementum eu, egestas ac dui. Maecenas egestas dapibus ipsum. Vivamus ut ipsum in tortor ultrices imperdiet. Etiam augue felis, gravida quis dictum at, tempus eget arcu. Duis elementum diam sit amet sapien luctus scelerisque. Proin non purus nulla. Cras vehicula, tellus vitae pellentesque sagittis, lectus nisl faucibus ligula, nec tincidunt risus elit luctus risus. Praesent sit amet commodo urna. Maecenas quis dui tellus, nec semper elit. Praesent porta, augue fringilla vehicula porta, diam lectus gravida sapien, sed molestie augue tellus in risus. Vivamus lectus dui, ultrices nec dapibus vitae, posuere eget velit. Donec scelerisque molestie lorem, in convallis justo consequat non. Sed sed enim eu nisl rutrum placerat.</p> 
     </div> 
    </body> 
</html>

更新2：

現在我加入div的頂端，但內容不被推倒： http://jsfiddle.net/qTw9P/7/

不知道我做錯了什麼。

UPDATE 1：

以下的jsfiddle工作正常interms顯示/隱藏不隱藏任何內容的通知的：

http://jsfiddle.net/qTw9P/4/

然而，滾動時，該通知滾動頁面，它應該停留在可見頁面的頂部。

原題：

可有人請點我的通知系統/插件/教程，創建類似於計算器在這裏顯示的通知的通知？

基本上，通知應該是可堆疊的，並且它們不應該與頁面重疊，即實際的頁面內容向下移動，因此頁面上的任何內容都不會被通知覆蓋。同時，即使在滾動時，通知也應始終保持在可見屏幕的頂部。基本上，只是如何計算器通知似乎工作。

來源

2011-06-18 oshirowanen

@FrédéricHamidi，該鏈接中的通知懸停在網頁內容上，我不想要。我想要通知留在頂部，但向下移動頁面內容，所以沒有任何重疊，比如stackoverflow通知的工作方式。 – oshirowanen

是真的，即使jBar似乎只使用覆蓋。看看[通知警報類似於如何計算器功能]（http://stackoverflow.com/q/3718125/464709），然後:) –

基於css和CHRIS在該文章中的評論，他/她想要該通知將位於頁面的頂部而不會將內容推下。我希望將爭議推下來，但同時，在滾動時將通知保留在頂部可見頁面。 – oshirowanen

這將是很難找到一個系統，插件，或具有你指定的教程，但如何AJAX notifications with jQuery？

來源

2011-06-18 10:03:09 Babiker

請參閱原始問題中的更新2。 – oshirowanen

爲了在滾動時將通知保留在頁面的頂部，您將不得不使用position:fixed;。

爲了確保頁面仍然下降，當添加通知時，您還可以添加一個具有特定高度的div作爲推動者來獲取內容。

當您收到多個通知時，您必須根據先前通知的高度來計算新通知必須出現在哪個垂直位置。

來源

2011-06-18 11:36:00 Kokos

不知道如何實現這一點。 – oshirowanen

我對'position：fixed;'的評論與創作給出的答案類似，但你也必須做現在你正在做的事情：在頁面頂部添加一個div，以便內容被壓低。 – Kokos

我試過，但它不工作。 – oshirowanen

尋找一個通知系統

回答

相關問題