在FireFox中用大3 + jquery在頁面頂部顯示圖像？

Question

想選擇時將單個圖像放在頁面的頂部或頂部。

搜索後，似乎有支持此許多插件 - 但也有很多其他的功能和開銷，我不需要（圖庫，視頻，縮略圖等支持）

使用基本的JavaScript，CSS，HTML和jQuery，特別是在FireFox中，是否可以將單個圖像置頂？

謝謝。

（請注意*：這是在房子的產品，因此，這些要求和限制）

Answer 1

這是我掀起的一個非常基本的例子。希望好學習的榜樣：

http://jsfiddle.net/v9LTP/2/

$('img').click(function(){ //bind a click event handler to images 
    var img = $(this).clone().addClass('modal').appendTo($('#blackout')); //clone the clicked image element and add to the blackout div which gives the dark background. 
    $('#blackout > #close').click(function(){ //attach click handler to close button 
     $('#blackout').fadeOut(function(){ //fade the blackout div 
      img.remove(); //remove the image element we cloned, so we can do it again. 
     }); 
    }); 
    $('#blackout').fadeIn(); //show the blackout div 
}); 

Answer 2

對於一個愚蠢的簡單的收藏，我一直利用http://buckwilson.me/lightboxme/最近。

Answer 3

嘗試引導的模式。

JavaScript - Twitter Bootstrap

GitHub的源代碼

GitHub bootstrap-modal.js

Answer 4

是否有可能只是把一個單一的圖像ontop的有基本的JavaScript，CSS，HTML和jQuery，特別是在Firefox？

是的，這是可能的，但插件大部分時間更容易實現。你所要完成的是類似於light box效果的東西，但我會盡力給基礎上，你需要完成4個步驟一個簡單的解決方案是什麼，你正在嘗試做的：

1. 創建一個覆蓋股利。這一個div會使整個頁面模糊或變暗。在下面的例子中，它會使屏幕變暗（因爲它更簡單）。
2. 創建一個div，將被附加到覆蓋div並將包含您想要顯示的圖像。在下面的演示中，這個div將是覆蓋的div的lighter，實際上它們的寬度是屏幕的一半，高度是屏幕的一半。
3. 將更大的圖像添加到您的圖像div。

4. 根據它的alt文字添加字幕到您的圖像。

   $(document).ready(function() 
   { 
   
       var docWidth = $(document).width(); 
       var docHeight = $(document).height(); 
   
       //First Step" Creating the overlay-div and adding opacity to it 
       var overlayDiv = "<div id="overlay-div"></div>" 
       $("body").append(overlayDiv); 
       $("#overlay-div").css("position","absolute", "top","0","left","0","background-color","#000","opacity","0.5", "width", docWidth + "px", "height",docHeight + "px"); 
   
       //Second step: Creating the image-div and centering it on the screen 
   
       $("#overlay-div").append("<div id=\"image-div\"></div>"); 
       $("#image-div").css("position","absolute", "top",docHeight/4 + "px","left",docWidth/4 + "px","background-color","#FFF", "width", docWidth/2, "height",docHeight); 
   
       //Third step: Creating an image to display inside the image-div and centering it 
   
       $("#image-div").append("<img src=\"path/to/your/image\"id=\"zoomed-img\" alt=\"This is a zoomed image\"/>"); 
       var imgWidth = $("#image-div").width(); 
       var imgHeight = $("#image-height").height(); 
   
       $("#image-div").css("position","absolute", "top","10px","left","10px"); 
   
       //Fourth step: Creating a subtitle from the alt text 
       var subtitle = "<p id=\"text-subtitle\">" + $("#image-div").attr("alt") + "</p>"; 
   
       $("#image-div").append(subtitle); 
       $("#text-subtitle").css("position","absolute", "top",imgHeight + 20 + "px","left","10px"); 
   
   
   }); 
   

此功能被觸發時，您的文件已準備就緒，並得到一個任意圖像。但是可以通過點擊觸發一個不同的圖像（使用不同的字幕），只需稍微調整一下上面的代碼即可。

我有意向你展示一個簡單的演示，用幾行jQuery/javascript代碼創建你想要的東西是可行的。當然，它並不像插件效果的90％那麼好，但它可能是一個開始。

我希望它有幫助。乾杯