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/，允许您显示任何类型的内容。