我想根据我的框架高度和宽度来修复模型框的高度宽度。i frame URL 是我的本地域意味着模态框和 i frame URL 在同一个域上。我已经尝试过,但没有得到任何相关结果。这是小提琴网址。
http://jsfiddle.net/shagun_jsfiddle/KY49P/1/
HTML
<a id="howdy" href="#">Howdy</a>
<div id="overlay" style="display: none;"></div>
<div id="modal" style="display: none;">
<a id="close" href="#">close</a>
<div>
<div id="content">
<iframe src="http://fiddle.jshell.net/shagun_jsfiddle/XxuLb/show/" frameborder="0" height="100%" width="100%"></iframe>
</div>
</div>
</div>
CSS
* {
margin:0;
padding:0;
}
#overlay {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
opacity:0.5;
filter:alpha(opacity=50);
}
#modal {
position:absolute;
background:url(tint20.png) 0 0 repeat;
background:rgba(0,0,0,0.2);
border-radius:14px;
padding:8px;
}
#content {
border-radius:8px;
background:#fff;
padding:20px;
width:550px;
}
#close {
position:absolute;
background:url(close.png) 0 0 no-repeat;
width:24px;
height:27px;
display:block;
text-indent:-9999px;
top:-7px;
right:-7px;
}
jQuery
var modal = (function(){
var method = {},
$overlay,
$modal,
$content,
$close;
$modal = $('#modal');
// Center the modal in the viewport
method.center = function () {
var top, left;
top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;
$modal.css({
top:top + $(window).scrollTop(),
left:left + $(window).scrollLeft()
});
};
// Open the modal
method.open = function (settings) {
//$content.empty().append(settings.content);
$modal = $('#modal');
$modal.css({
width: settings.width || 'auto',
height: settings.height || 'auto'
});
$contentWd = $('#content').width(); //main content div width
//$('#iframe-box').css({
//height : $("iframe[id='iframe-box']").contents().find("html").height()
//});
$content_inWidth = $('#content').width();
$content_inHeight = $('#content').height();
$iframeWidth = $('.iframe').width();
$iframeHeight = $('.iframe').height();
//alert($content_inHeight);
if($content_inWidth > $iframeWidth){
//alert($content_inWidth);
}else{
//alert($iframeWidth);
}
method.center();
$(window).bind('resize.modal', method.center);
$modal.show();
$('#overlay').show();
};
return method;
}());
// Wait until the DOM has loaded before querying the document
$(document).ready(function(){
$('a#howdy').click(function(e){
modal.open({});
e.preventDefault();
});
$('#close').click(function(e){
e.preventDefault();
$('#modal').hide();
$('#overlay').hide();
});
});