当我点击 Bootstrap Modal 时页面不断刷新

Question

我有一个页面，其中有两个按钮连接到两个不同的引导模式。 他们都工作正常，但突然停止了。 每当我现在单击任一按钮时，页面都会不断刷新，而不是显示相应的模式。 我不知道问题是什么，因为控制台中没有错误。

该网站托管在https://storzy.netlify.app/

我已经搜索了高低，但似乎无法找到可能阻止模态现在正确显示的原因。

请问我该如何停止页面刷新并显示正确的模式？

谢谢你。

Answer 1

将form更改为div以供您的登录和注册父母使用

<div class="form-inline mt-3 mt-lg-0">
    <button class="btn btn-outline-primary" data-toggle="modal" data-target="#loginModal">login</button>
    <button class="btn btn-primary ml-3" data-toggle="modal" data-target="#signupModal">Sign up</button>
</div>

Answer 2

如果按钮在表单中，则默认行为是提交。 如果按钮不在表单中，它什么也不做。 因此，为避免页面刷新，请将type="button"添加到按钮以防止刷新。

<button class="btn btn-outline-primary" data-toggle="modal" data-target="#loginModal" type="button">login</button>
<button class="btn btn-primary ml-3" data-toggle="modal" data-target="#signupModal" type="button">Sign up</button>