W3 Modal执行onclick JavaScript后自动关闭问题求助

核心原因 #

你的问题大概率是Calculate按钮触发了表单默认提交行为：如果按钮嵌套在<form>标签内，浏览器会默认将其识别为submit类型按钮，点击后会触发表单提交，导致页面刷新或Modal触发关闭逻辑，从而让计算结果仅瞬间显示就消失。

具体解决办法 #

• 给按钮添加type="button"属性，彻底阻止默认提交行为：

<button type="button" onclick="calculate()">Calculate</button>

• 若无法修改按钮类型，可在计算函数中阻止默认事件：

function calculate() {
  // 你的原有计算逻辑代码
  // ...
  
  // 阻止表单默认提交行为
  if (event) event.preventDefault();
}

• 也可在按钮的点击事件中直接返回false：

<button onclick="calculate(); return false;">Calculate</button>

• 额外检查：确认Modal的关闭逻辑中，是否存在监听表单submit事件并自动关闭Modal的代码，若有则移除该监听。

验证 #

修改后使用你的测试用例（Frame Width=16、Frame Height=20、Picture Width=11、Picture Height=17、Bottom Mat=1）点击Calculate，计算结果应能正常保留显示，Modal不会自动关闭。

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