[英]Modal box height width fix according to iframe's height width
我想根據i框架的高度和寬度來固定模型框的高度寬度。 i框架URL是我的本地域,表示模式框,而i框架URL在同一域中。 我已經嘗試過但沒有得到任何相關結果。 這是小提琴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();
});
});
也許這會有所幫助。 在模式窗口的css中,將頂部,左側,底部和右側設置為0。這將拉伸模型以填充其所在的框(只要它保持絕對,並且其容器設置為將其保留的位置)相對-絕對或相對。)
#modal {
position:absolute;
background:url(tint20.png) 0 0 repeat;
background:rgba(0,0,0,0.2);
border-radius:14px;
padding:8px;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.