SimpleModal的初始加載大小不正確

Question

我目前有一個使用simplemodal的通用圖像加載器。

$('#clickMe').click(function(){ 
    $.modal("<div><img src=\"someimage.jpg\" /></div>"); 
}); 

第一次點擊 - 模式窗口不正確。它在圖像後面顯示爲一個小窗口。

第二次點擊按鈕 - 模式是正確的。模態的大小根據渲染的圖像是正確的，圖像位於模態框內。

我沒有選擇用圖像創建div並設置display none屬性。

有什麼見解？

Answer 1

從我可以告訴您加載圖像的方式，SimpleModal不能夠確定它的大小。

你有幾個選項...

1）添加昂秀回調，並調用$.modal.setContainerDimensions()

$('.clickMe').click(function() { 
    $.modal("<div><img src=\"someimage.jpg\" /></div>", { 
     onShow: function() { 
      $.modal.setContainerDimensions(); 
     } 
    }); 
    return false; 
}); 

2）首先加載圖像，然後顯示它：

$('.clickMe').click(function() { 
    var img = new Image(); 
    img.onload = function() { 
     $.modal("<div><img src=\"someimage.jpg\" /></div>"); 
    }; 
    img.src = 'someimage.jpg'; 
    return false; 
}); 

這兩個都應該工作。讓我知道你是否有麻煩。

Answer 2

如果使用這樣的：SimpleModal，再試着設置autoResize到'true'在插件選項，就像這樣：

$("#sample").modal({ 
    autoResize:true 
}); 

也可以嘗試把你的代碼放到一個.ready()或window.onload

祝你好運，也可以嘗試其他模式插件，如FancyBox

Answer 3

此代碼將以simplemodal插件顯示圖像。 我只是在這裏發佈，並添加一點描述。

HTML：

<table class="thumbnail"> 
    <tr> 
    <td> 
    <img src="/peopledesign/pictures/1319003385503_thumbnail.jpg" alt=""> 
    </td> 
</tr> 
<tr> 
    <td> 
    <a href="/peopledesign/pictures/1319003385503.jpg" class="pixLink">zoom out</a> 
    </td> 
</tr> 
</table> 

<div id='pix'> 
    <div class='header'><span>#springMessage('display.common.showpix')</span></div> 
    <div class='pixframe'></div> 
</div> 

<script type="text/javascript"> 
    $(document).ready(
      function(){ 
      previewPix($('#project_item_scope a.pixLink,#project_basicinfo_scope a.pixLink')); 
      } 
); 
</script> 

的JavaScript將獲得鏈接的href屬性，並創建一個圖像追加到pixframe格：

function previewPix(linkObj){ 
    linkObj.click(
    function (e) { 
     e.preventDefault(); 
     var imgUrl=$(this).attr('href'); 
     var dialogDivObj=$('#pix'); 
     var pixDivObj=$('.pixframe',dialogDivObj); 
     pixDivObj.empty(); //clean pix div 
     var img = new Image(); 
     img.onload = function() {// first load image and fit its width and height 
     var i=$(img); 
     i.attr('id', 'pic-image'); 
     i.width(this.width); 
     i.height(this.height); 
     var outerHeight = i.outerHeight(true); 
     var outerWidth = i.outerWidth(true); 
     dialogDivObj.width(outerWidth); 
     dialogDivObj.height(outerHeight+30);//30=container header's height 
     pixDivObj.append(i); 
     showPixDialog(
      dialogDivObj 
     ); 
     } 
     img.src=imgUrl; 
    } 
); 
} 

function showPixDialog(dialogDivObj){ 
    dialogDivObj.modal({ 
    closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>", 
    position: ["10%"], 
    overlayId: 'pix-overlay', 
    containerId: 'pix-container', 
    onShow:function(dialog){ 
     // important! 
     // refere from:http://stackoverflow.com/questions/5240875/simplemodal-does-not-size-properly-with-initial-load 
     dialog.modal.setContainerDimensions(); 
    } 
    }); 

CSS從SimpleModal的對話風格修改：

/* pix preview dialog */ 
#pix {display:none;} 

/* Overlay */ 
#pix-overlay {background-color:#eee; cursor:default;} 

/* Container */ 
#pix-container { 
    height:auto; 
    width:auto; 
    font:12px/1.5 "Helvetica Neue",Arial,"Liberation Sans",FreeSans,sans-serif; 
    text-align:left; 
    background:#fff; 
    border:1px solid #F90; 
} 
#pix-container .header { 
    height:30px; line-height:30px; width:100%; 
    /*background:url(../../images/simplemodal-header.gif) repeat-x; color:#fff;*/ 
    background-color:#F90; 
    font-weight:bold; 
} 
#pix-container.header span {padding-left:8px;} 
#pix-container.pixframe { 
    text-align:center; 
    vertical-align: middle; 
    margin:0; 
    padding:5px 5px 5px 5px; 
} 
#pix-container a.modal-close, 
#pix-container a.modal-close:link, 
#pix-container a.modal-close:active, 
#pix-container a.modal-close:visited { 
    text-decoration:none; 
    font-weight:bold; 
    position:absolute; 
    right:10px; 
    top:2px; 
    color:#fff; 
} 
#pix-container a.modal-close:hover {color:#ccc;}