仅用JavaScript实现按钮布局及画廊弹窗适配问题求助

我帮你搞定了弹窗占页面80%宽高、图片不超出弹窗的需求，并且完全遵循了「不修改HTML/CSS，仅调整JS」的要求。下面是修改后的完整JS代码，以及关键改动的说明：

修改后的JS代码 #

$(document).ready(function() { 
    var images = $('div[title ="London gallery"]').children('img').map(function() { 
        return $(this).attr('src') 
    }).get(); 
    var description = $('div[title ="London gallery"]').children('p').map(function() { 
        return $(this).text(); 
    }).get(); 
    $('div[title ="London gallery"]').hide(); 

    var gallery_lndn = document.createElement('button'); 
    gallery_lndn.id = 'btn_London'; 
    gallery_lndn.innerHTML = 'Look at the gallery!'; 
    document.body.appendChild(gallery_lndn); 

    document.getElementById('btn_London').onclick = function() { 
        show_pictures(images, description); 
    } 

    function show_pictures(images, description) { 
        function popUp() { 
            var index = 0; 
            var popup = document.createElement('div'); 
            popup.className = 'popup'; 
            popup.id = 'div_popup'; 
            // 弹窗核心样式：固定定位+视口百分比+完美居中
            popup.style.background = "#2F4F4F";
            popup.style.position = "fixed";
            popup.style.top = "50%";
            popup.style.left = "50%";
            popup.style.transform = "translate(-50%, -50%)";
            popup.style.height = "80vh";
            popup.style.width = "80vw";
            popup.style.padding = "20px";
            popup.style.boxSizing = "border-box";
            popup.style.display = "flex";
            popup.style.flexDirection = "column";
            popup.style.position = "relative";

            // 关闭按钮：固定在弹窗右上角
            var cancelButton = document.createElement('button'); 
            cancelButton.innerHTML = 'x'; 
            cancelButton.id = 'btn_cancelButton'; 
            cancelButton.style.background = "red"; 
            cancelButton.style.border = "none"; 
            cancelButton.style.fontSize = "16px"; 
            cancelButton.style.padding = "15px 20px"; 
            cancelButton.style.position = "absolute";
            cancelButton.style.top = "10px";
            cancelButton.style.right = "10px";
            cancelButton.onclick = function(e) { 
                popup.parentNode.removeChild(popup) 
            }; 

            // 上一张按钮
            var previousButton = document.createElement('button'); 
            previousButton.innerHTML = '<<'; 
            previousButton.style.background = "#32CD32"; 
            previousButton.style.border = "none"; 
            previousButton.style.fontSize = "16px"; 
            previousButton.style.padding = "15px 32px"; 
            previousButton.style.marginRight = "auto";

            previousButton.onclick = function() { 
                index = (index == 0) ? images.length - 1 : index - 1; 
                updateImage(); 
            } 

            // 下一张按钮
            var nextButton = document.createElement('button'); 
            nextButton.innerHTML = '>>'; 
            nextButton.style.background = "#32CD32"; 
            nextButton.style.border = "none"; 
            nextButton.style.fontSize = "16px"; 
            nextButton.style.padding = "15px 32px"; 
            nextButton.style.marginLeft = "auto";

            nextButton.onclick = function() { 
                index = (index == images.length - 1) ? 0 : index + 1; 
                updateImage(); 
            } 

            // 图片容器：控制图片显示范围
            var imgContainer = document.createElement('div');
            imgContainer.style.flexGrow = "1";
            imgContainer.style.display = "flex";
            imgContainer.style.justifyContent = "center";
            imgContainer.style.alignItems = "center";
            imgContainer.style.overflow = "hidden";

            // 图片状态信息
            var message = document.createElement('span'); 
            message.style.color = "#fff";
            message.style.textAlign = "center";
            message.style.marginTop = "10px";

            // 按钮容器：统一管理切换按钮
            var buttonContainer = document.createElement('div');
            buttonContainer.style.display = "flex";
            buttonContainer.style.marginTop = "15px";

            // 初始化弹窗结构（只添加一次，避免重复）
            popup.appendChild(cancelButton);
            popup.appendChild(imgContainer);
            buttonContainer.appendChild(previousButton);
            buttonContainer.appendChild(nextButton);
            popup.appendChild(message);
            popup.appendChild(buttonContainer);
            document.body.appendChild(popup);

            function updateImage() { 
                var img = new Image(); 
                img.src = images[index]; 
                // 图片自适应样式：按比例缩放，不超出容器
                img.style.maxWidth = "100%";
                img.style.maxHeight = "100%";
                img.style.objectFit = "contain";

                // 更新按钮状态
                if (index == 0) { 
                    previousButton.style.background = "#A9A9A9"; 
                    previousButton.disabled = true;
                } else if (index == images.length - 1) { 
                    nextButton.style.background = "#A9A9A9"; 
                    nextButton.disabled = true;
                } else { 
                    previousButton.disabled = false;
                    nextButton.disabled = false;
                    previousButton.style.background = "#32CD32"; 
                    nextButton.style.background = "#32CD32"; 
                } 

                // 更新图片和描述
                imgContainer.innerHTML = "";
                imgContainer.appendChild(img);
                message.innerHTML = `Picture ${index + 1}/${images.length}<br>${description[index]}`;
            } 

            updateImage(); 
        } 
        popUp(); 
    } 
});

关键改动说明 #

1. 弹窗定位与尺寸修复：

   • 把弹窗position改为fixed，配合top:50%+left:50%+transform: translate(-50%, -50%)实现完美居中，不受页面滚动影响。
   • 使用vh（视口高度）和vw（视口宽度）单位，确保弹窗始终是页面宽高的80%。
   • 添加box-sizing: border-box，让内边距计入弹窗宽高，避免超出视口范围。

2. 图片溢出控制：

   • 创建独立的图片容器，用flexGrow:1占满弹窗剩余空间，同时设置overflow:hidden隐藏超出部分。
   • 给图片添加maxWidth:100%、maxHeight:100%和objectFit:contain，保证图片按比例缩放，不会撑破弹窗。

3. 按钮布局优化：

   • 关闭按钮改为绝对定位，固定在弹窗右上角，不会随内容移动。
   • 切换按钮放在单独容器中，用flex布局实现左右对齐，避免定位错乱。
   • 只在弹窗初始化时添加一次按钮，解决原代码中updateImage重复添加按钮的问题。

4. 交互体验提升：

   • 给禁用状态的按钮添加disabled属性，增强交互反馈。
   • 用模板字符串简化描述文本拼接，代码可读性更高。

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