画面が表示されると、画像を表示、クリックで削除。
jQueryを読み込んで、下記のスクリプトを読み込む。
スクリプト内に表示画像を記載しています。
$(function(){
var layer = $('<div id="box_layer"></div>');
var win = $('<div id="box_window"></div>');
//最初に表示する画像のURL
var img = $('<img src="a-b.jpg" width="600" height="400" />')
var boxlink = $('.box');
layer.css('opacity','0.7');
var closeBtn = layer.add(img);
win.append(img);
$('body').append(layer).append(win);
win.fadeIn(300);
var w = img.attr('width');
var h = img.attr('height');
var bodyW = $('body').width();
var bodyH = $('body').height();
var left = -(w/2);
var top = -(h/2);
//alert(mW);
win.css({
width: w+'px',
height :h+'px',
marginLeft:left+'px',
marginTop:top+'px',
padding:'10px',
background: 'gray'
});
layer.fadeIn(300);
closeBtn.click(close);
function close(){
openFlg = false;
layer.fadeOut(300);
win.fadeOut(300,function(){
img.remove();
titlebox.text("");
});
closeBtn.unbind('click',close);
}
});
