我已经通过bower添加了bootstrap到我的项目中，然后我导入了bootstrap.min.js文件，然后导入了modal.js文件。(打开模式的按钮在表单内部)。我只是删除了modal.js的导入，它为我工作。

我遇到了@gpasse在他的例子中显示的相同症状。这是我的密码……

<form...>
  <!-- various inputs with form submit --->

  <!-- button opens modal to show dynamic info -->
  <button id="myButton" class="btn btn-primary">Show Modal</button>
</form>

<div id="myModal" class="modal fade" ...>
</div>

<script>
  $( '#myButton' ).click( function() {
    $( '#myModal' ).modal();
  )};
</script>

正如@Bhargav所建议的，我的问题是由于按钮试图提交表单，并重新加载页面。我将按钮更改为<a>链接如下:

<a href="#" id="myButton" class="btn btn-primary">Show Modal</a>

.．.它解决了这个问题。

注意:我还没有足够的声誉来简单地添加评论或点赞，我觉得我可以补充一点澄清。

又是一个原因/解决方案!我在JS代码中有:

$("#show_survey").click(function() {
  $("#survey_modal").modal("show")
})

但是我的HTML代码已经写成了:

<a class="small-text link" data-target="#survey_modal" data-toggle="modal" href="#" id="show_survey">Take a quick 7 question survey!</a>

这是复制输入代码并导致模态打开然后关闭的另一种排列方式。在我的例子中，数据目标和数据切换在html按照引导文档已经触发模式工作。因此，JS代码是冗余的，当删除它时，它可以工作。

在我的例子中，单击按钮会导致页面重新加载(不希望)。

以下是我的解决方案:

<button class="btn btn-success" onclick="javascript: return false;" 
data-target="#modalID" data-toggle="modal">deaktivieren</button>

今天我自己也遇到了这个问题，而且碰巧只是在Chrome上。是什么让我意识到这可能是一个渲染问题。 移动特定的模式到它自己的渲染层解决了这个问题。

#myModal {
  -webkit-transform: translate3d(0, 0, 0);
}

e.preventDefault ();jquery UI

对我来说，这个问题发生在jquery ui按钮上的click方法覆盖，导致默认情况下单击页面重新加载。