بگردی که کد زیاده برای عکس اسم معروفترین پلاگینش Lightbox هستش
من برای یه پوژه سبک یه کلاس برای این کار نوشتم توضیح می دم ببین می تونی استفاده کنی ازش یا نه
این کد رو بذار تو صفحت ببین بدردت می خوره اگه خورد توضیحات بیشتر می دم
ولی توضیحات مختصر
قسمتی که شما تغییر می دی فقط این خط هستش
(600, 800, 'آخرین اخبار', 'خبر ها')
اولی عرض , دومی طول , سومی تیتری که اون بالاهستش و آخری متنی هستش که داخل باکس نشون میده
کد:
<style type="text/css">
div.share_holder {
position: fixed;
top : 0;
left: 0;
width: 100%;
height: 0px;
}
div.share_inner {
position: relative;
margin: auto;
top : 80px;
background: white;
border : 4px solid #696969;
height: auto;
}
div.share_header {
background: #027EB1;
color: #FFFFFF;
padding : 5px 10px;
}
div.share_content {
padding : 10px;
}
span.share_close {
width: 17px;
height: 18px;
display: block;
position: absolute;
top : 4px;
left: 10px;
background: url(../image/bt.png) no-repeat -59px -24px;
cursor: pointer;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function ce(el)
{
return document.createElement(el)
}
popupbox = function(width, height, header, html)
{
var $t = this;
$t.parentdiv = ce('div');
$('body').append($t.parentdiv);
$t.parentdiv = $($t.parentdiv);
$t.parentdiv.addClass('share_holder');
$t.innerdiv = ce('div');
$t.parentdiv.append($t.innerdiv);
$t.innerdiv = $($t.innerdiv);
$t.innerdiv.addClass('share_inner');
$t.innerdiv.css({
'min-height' : height+'px',
width : width+'px'
});
$t.header = ce('div');
$t.innerdiv.append($t.header);
$t.header = $($t.header);
$t.header.addClass('share_header');
$t.header.text(header);
$t.contentdiv = ce('div');
$($t.contentdiv).addClass('share_content');
$($t.contentdiv).append(html);
$t.innerdiv.append($t.contentdiv);
$t.closeobj = ce('span');
$($t.closeobj).click(function(){
$t.close();
});
$($t.closeobj).addClass('share_close');
$t.innerdiv.append($t.closeobj);
}
popupbox.prototype.hide = function()
{
var $t = this;
$t.parentdiv.fadeOut('fast');
}
popupbox.prototype.close = function()
{
var $t = this;
$t.parentdiv.remove();
}
$(document).ready(function(){
cpopup = new popupbox(600, 800, 'آخرین اخبار', 'خبر ها')
})
</script>
البته یه عکس هم داره برای دکمه بستنش که خودت بذار
