2011-11-30 14 views
0
$('a.enlarge').click(function() { 
     $('#modal-image').modal({ 
      overlayClose: true, 
      opacity: 50, 
      minHeight: 462, 
      minWidth: 656, 
      overlayCss: { 
       backgroundColor: '#fff' 
      }, 
      appendTo: '#the-media' 
     }); 

     return false; 
    }); 


<div id="modal-image" style="display:none"> 
    <img src="someimage.jpg" width="462" height="656" id="myImage" /> 
</div> 

的形象是462px X 656px但simplemodal保持它擴展到620px X 656px。我試着加入和了minHeight參數minwidth的JS和width和height屬性的圖像標籤,甚至這個CSS:是否有辦法防止簡單模式從調整圖像大小?

#myImage { width: 462px !important; height: 656px !important; } 

但沒有這個工作時,圖像保持被調整我的simplemodal。無論如何,以防止這一點?我寧願有模態燈箱顯示原始圖像的高度和寬度,但滾動如果太大條,以適應模式。

回答

0

呼,終於得到它通過添加到圖像標籤的工作:

<img src="someimage.jpg" width="462" height="656" style="width: 462px !important; height: 656px !important" /> 

基本沒動的CSS內聯,簡單的模式可能會改變該造型來縮放圖片。雖然當我看着firebugs HTML標籤我看不到任何其他樣式通過簡單的模式添加到圖像的標籤這就是爲什麼我傻眼了。所以,我還是不知道爲什麼這工作,但它確實,我還以爲它張貼以防其他人是否有同樣的問題。

1

簡單的模式還支持按照the documentationmaxWidthmaxHeight,如果你設置這些以及minWidthminHeight你應該有效地迫使模態的大小。

我不能評論它是否自動添加一個滾動條,但是你可以在CSS中自己定位該元素,並且如果沒有,則將overflow:auto;應用於圖像容器元素。

+0

不,即使在將最小/最大高度/寬度設置爲相同值之後,它仍然會執行此操作。 – TK123

0

從文檔,它看起來好像你的意思使用containerCss以應用CSS。另外,jQuery中的CSS屬性通常被包裝爲字符串。