jQuery可擴展DIV盒子

Question

你知道如何看到那些jQuery可擴展盒子的東西，當你點擊一個縮略圖圖像時，擴展到在屏幕中心顯示一個更大的圖像？

那麼，我該怎麼做幾乎完全相同的東西，而不是那裏只是一個圖像裏面，我需要用div和HTML內容填充該「框」。像一些圖片，一些文字和超鏈接？

我已經看到無處不在我能想到，這是否已經存在？如何去做這樣的事情？任何幫助都是值得讚賞的。

謝謝！

Answer 1

你可以做這樣的事情出現一個對話框：

http://jsfiddle.net/maniator/dUBhw/

JS：

$('.more').click(function(){ 
    var rel = $(this).attr('rel'); 
    var $rel = $('#'+rel); 
    var div = $('<div>').append($rel); 
    div.dialog({ 
     width: 500, 
     position: 'center' 
    }); 
    $rel.show(); 

}) 

HTML：

<div class='more' rel='the_more'>MORE</div> 

<div id='the_more' class='hide'> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempor sodales neque, ac venenatis neque posuere eu. Ut accumsan augue magna, ac lacinia massa. Praesent ultricies luctus rhoncus. Duis at neque ullamcorper risus fermentum auctor. Phasellus id ipsum purus, quis pretium quam. Phasellus id ligula turpis, at lobortis lorem.<img src='http://placehold.it/333/fe4'/>' Vivamus ac ipsum felis, eu blandit nisi. Aliquam leo lorem, lacinia non feugiat nec, facilisis nec ipsum. Etiam sollicitudin laoreet lorem quis laoreet. In lacinia porta metus, dictum semper urna dapibus tempus. Vivamus non odio lorem, a dapibus elit. Etiam iaculis urna non erat rhoncus a vehicula odio ultricies. Aliquam dignissim, ipsum sed lacinia rhoncus, mauris risus aliquam quam, eu tempus magna purus vitae nunc. Nullam feugiat viverra lacinia. Quisque ultricies pretium magna et facilisis. 
</div> 

Answer 2

有很多jQuery插件，例如http://static.railstips.org/orderedlist/demos/fancy-zoom-jquery/，允許您顯示任何類型的內容。