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

Question

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

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

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

谢谢。

Answer 1

将 form 更改为 div 以便您登录和注册 parents

<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>

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

Page keeps refreshing when I click on a Bootstrap Modal

html

javascript

twitter-bootstrap

bootstrap-modal

bootstrap-4