自定义关闭按钮关闭Colorbox后页面上移问题求助

核心原因分析 #

1. 锚点默认行为触发：iframe内的关闭按钮使用<a href="#">，点击时会触发浏览器默认锚点跳转，强制页面滚动到顶部。
2. 滚动条切换布局偏移：打开弹窗时设置body { overflow: hidden }隐藏滚动条，部分浏览器会自动给body添加右侧margin填补滚动条空白；关闭弹窗恢复overflow: auto时，该margin未被正确重置，导致页面偏移。

分步修复方案 #

1. 阻止锚点默认跳转 #

修改iframe内的关闭按钮代码，添加return false阻止<a>标签的默认跳转行为：

<a href="#" onclick="parent.$('.iframe1').colorbox.close(); return false;" id="close_alert">
    <button class="button2 fontvag400">Close</button>
</a>

或者直接替换为<span>避免锚点行为：

<span onclick="parent.$('.iframe1').colorbox.close();" id="close_alert" style="cursor: pointer;">
    <button class="button2 fontvag400">Close</button>
</span>

2. 修复滚动条切换的布局偏移 #

调整cbox_closed事件逻辑，手动重置body的margin-right，抵消浏览器自动添加的滚动条补偿值：

jQuery(document).bind('cbox_open', function() {
    $.colorbox.resize();
    // 计算滚动条宽度并设置body margin-right，避免布局跳动
    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
    jQuery('body').css({ 
        overflow: 'hidden',
        marginRight: scrollbarWidth + 'px'
    });
}).bind('cbox_closed', function() {
    jQuery('body').css({ 
        overflow: 'auto',
        marginRight: '' // 重置margin-right
    });
});

3. 清理冗余初始化代码 #

首页脚本中同时初始化了.group1和.iframe1两个Colorbox实例且均设置open:true，会导致弹窗重复触发，建议保留一个即可：

$(document).ready(function(){
    $(".iframe1").colorbox({
        iframe:true, 
        transition:"fade",
        closeButton:false,
        width:"90%", 
        height:"90%", 
        maxWidth: '900px',
        maxHeight: '',
        open:true, 
        onOpen: function(){$("#colorbox").css("opacity", 0);}
    });
});

内容的提问来源于stack exchange，提问作者Daniel Siddall