クリックで取得してロードする画像が供給されるMODALをロードしています。ダイアログが適切に中央に配置されるように、クリック時に画像をロードして表示する方法を誰かが説明してください。現状では、ダイアログは画像サイズを認識していないため、中心からずれてロードされています。.load 関数を使用してみましたが、どこに配置すればよいかわかりません。エラーが発生したためです。以下のコードは完全に機能しますが、サイズを認識できるように、ダイアログにフィードする前に desIMG をプリロードする必要があります。
function thumbNailModal() {
$('.thumb').click(function() {
picDES = document.getElementById(this.id).getAttribute('id');
var desIMG = $('<img/>', {
"class":"inline",
src: '/images/design/full/' + picDES
});
$(desIMG).dialog(
{
modal: true,
draggable: false,
title: 'Designs',
height: 'auto',
width: 'auto',
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery(desIMG).dialog('close');
})
}
}
);
$(".ui-dialog-titlebar").hide();
});
}
編集
function thumbNailModal() {
$('.thumb').click(function() {
.load(
picDES = document.getElementById(this.id).getAttribute('id');
var desIMG = $('<img/>', {
"class":"inline",
src: '/images/design/full/' + picDES
});
)
もっとそういうのが欲しい。クリックするとロードされます。ページをロードするとすぐにすべての画像をプリロードするだけではありません。