SimpleModal does not size properly with initial load
I currently have a generic image loader using simplemodal.
$('#clickMe').click(function(){
开发者_Python百科$.modal("<div><img src=\"someimage.jpg\" /></div>");
});
The first time I click -- the modal window is incorrect. It is displayed as a small window behind the image.
The second time I click the button -- the modal is the correct. The size of the modal is correct based on the image rendered and image is inside the modal box.
I do not have the option of creating a div with the image and setting the display none property.
any insight ?
From what I can tell with the way you are loading the image, SimpleModal is not able to determine it's size.
You have a couple of options...
1) Add an onShow callback and call $.modal.setContainerDimensions()
$('.clickMe').click(function () {
$.modal("<div><img src=\"someimage.jpg\" /></div>", {
onShow: function () {
$.modal.setContainerDimensions();
}
});
return false;
});
2) Load the image first, then show it:
$('.clickMe').click(function () {
var img = new Image();
img.onload = function () {
$.modal("<div><img src=\"someimage.jpg\" /></div>");
};
img.src = 'someimage.jpg';
return false;
});
Both of those should work. Let me know if you have any troubles.
this code will display image with simplemodal plugin. I just post here and add a little description.
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 which will get link's href property and create a image appending to pixframe div:
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 which modified from SimpleModal's dialog style:
/* 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;}
If you are using this: SimpleModal , then try to set autoResize
to 'true'
in plugin options, like so:
$("#sample").modal({
autoResize:true
});
Also try putting your code into a .ready() or window.onload
Good luck, also maybe try other modal plugins, such as FancyBox
精彩评论