移动端落地页打开弹窗表单时如何隐藏底部固定导航栏？

这个需求完全可以通过JavaScript实现，你当前用的是Bootstrap 5的模态框组件，推荐优先用Bootstrap自带的模态框生命周期事件实现，覆盖所有弹窗触发/关闭场景，不会出现遗漏：

方案1：监听Bootstrap模态框事件实现 #

直接将以下代码添加到页面</body>标签前即可：

const targetModal = document.getElementById('exampleModal')
const navBar = document.querySelector('.navbar1')

if (targetModal && navBar) {
  // 弹窗打开时隐藏导航栏
  targetModal.addEventListener('show.bs.modal', function () {
    navBar.style.display = 'none'
  })
  // 弹窗关闭时恢复导航栏显示
  targetModal.addEventListener('hide.bs.modal', function () {
    // 如果你的导航栏原布局是flex/grid，把下面的block改成对应值即可
    navBar.style.display = 'block'
  })
}

如果需要隐藏效果更顺滑，可以用CSS类加过渡动画实现，先添加以下CSS代码：

.navbar1--hidden {
  transform: translateY(100%);
  transition: transform 0.3s ease;
  /* 用transform的好处是不会触发页面重排，动画更流畅 */
}

再把JS代码修改为增减类即可：

const targetModal = document.getElementById('exampleModal')
const navBar = document.querySelector('.navbar1')

if (targetModal && navBar) {
  targetModal.addEventListener('show.bs.modal', () => navBar.classList.add('navbar1--hidden'))
  targetModal.addEventListener('hide.bs.modal', () => navBar.classList.remove('navbar1--hidden'))
}

方案2：绑定点击事件实现 #

如果你不想依赖Bootstrap的事件，也可以直接绑定触发、关闭弹窗的按钮的点击事件：

const modalTrigger = document.querySelector('.product-action-btn-1')
const navBar = document.querySelector('.navbar1')
const closeBtns = document.querySelectorAll('[data-bs-dismiss="modal"]')

if (modalTrigger && navBar) {
  // 点击打开弹窗按钮时隐藏导航栏
  modalTrigger.addEventListener('click', () => navBar.style.display = 'none')
  // 点击任意关闭弹窗按钮时恢复导航栏
  closeBtns.forEach(btn => {
    btn.addEventListener('click', () => navBar.style.display = 'block')
  })
}

内容的提问来源于stack exchange，提问作者Yağız Gürbüz