Question

我在精美的盒子内容中有以下代码。我有链接，将调用另一个花哨的盒子iframe。第二页的宽度和高度将与第一个iframe页面不同。所以我使用第二页中的以下代码重新调整花式框iframe的大小，

   jQuery(function(){
                        //jQuery('div[id^=fancybox]').remove();
                        jQuery('#fancybox-frame', window.parent.document).load(function() { 
                            parent_fb_resize(560,444);            
                            jQuery('#fancybox-wrap').css('margin','auto');                    
                        });                            
});

使用以下代码重新调整iframe的大小，

function parent_fb_resize(w, h) {  
  if (w > 0 || h > 0) {

    if (w > 0) jQuery('div#fancybox-wrap', window.parent.document).css({ width: (w)+"px"});
    if (h > 0) jQuery('div#fancybox-wrap', window.parent.document).css({ height: (h)+"px"});
    if (w > 0) jQuery('#fancybox-content', window.parent.document).css({ width: w+"px"});
    if (h > 0) jQuery('#fancybox-content', window.parent.document).css({ height: h+"px"});
    jQuery.fancybox.resize();
    jQuery.fancybox.center();

  }
}
function fb_close_any() {
  window.top.eval('jQuery.fancybox.close()');
}

function fb_resize_any(w, h) {
  w = (w > 0) ? w : 0;
  h = (h > 0) ? h : 0;
  window.top.eval('fb_resize('+w+','+h+')');
}

到目前为止一切顺利。此代码调整第二页的大小。但由于 id fancybox-wrap

中的左侧属性，重新设置的花式框不在中心位置

{
display: block;
height: 444px;
left: 271px;
margin: 0 auto;
top: 20px;
width: 560px;
}

在这里，我需要找到页面的中心，并需要在jQuery('#fancybox-frame', window.parent.document).load()中动态应用左侧位置。请就此提出建议？

Answer 1

为什么left: 271px;甚至在css中？它不需要对元素进行居中，这就是margin: 0 auto;所做的事情。我建议只是摆脱它，因为这可能是你的问题。

这是一个证明我的意思的Jsfiddle

http://jsfiddle.net/fPqqT/

如果您无法摆脱左侧css，可能会在调整大小时将其设置为0px？

$("#fancybox-wrap").css("left", 0);

使用左侧属性调整大小后如何制作花式框中心

1 个答案: