点击按钮触发弹窗异常问题：搜索按钮与弹窗同步显示问题修复求助

我看了你的代码，问题出在两个关键地方：

1. 弹窗初始未设置隐藏：你的.pop-outer样式里没有默认隐藏的配置，页面加载时弹窗其实是处于显示状态的，只是被按钮的显示逻辑干扰，让你误以为是点击按钮时才和弹窗同时出现。
2. 搜索按钮的显示逻辑冲突：在popUpModal函数里，你一开始就调用了.show()强制显示搜索按钮，这直接覆盖了inputField函数里根据输入框内容控制按钮显隐的逻辑，导致按钮状态混乱。

下面是具体的修改方案：

第一步：修复弹窗初始隐藏状态 #

给.pop-outer添加display: none;，确保页面加载时弹窗默认隐藏：

.pop-outer {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none; /* 新增：让弹窗初始处于隐藏状态 */
}

第二步：修正搜索按钮的事件绑定逻辑 #

修改popUpModal函数，去掉强制显示按钮的.show()方法，让按钮的显隐完全由输入框内容的逻辑控制，该函数只负责绑定弹窗的显示/隐藏事件：

popUpModal: function() {
    // 移除原本的.show()，仅保留点击事件绑定
    $(".button-row [name=search]").on("click", function() {
        $('.pop-outer').fadeIn('slow');
    });
    $(".close").on("click", function() {
        $('.pop-outer').fadeOut('slow');
    });
},

修改完成后就能实现你的需求：

• 输入框为空时搜索按钮隐藏，输入框有内容时自动显示按钮
• 只有点击搜索按钮时弹窗才会弹出，点击关闭按钮后弹窗隐藏

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