我在移动设备上测试时也遇到过同样的问题，这个技巧对我来说很管用

<a type="submit" class="btn btn-primary" data-toggle="modal" href="#myModal">Submit</a> 

将按钮更改为锚定标签应该可以工作，问题是由于它的类型按钮，因为它试图提交，所以模式立即消失。并且也从模态中移除隐藏隐藏淡出给予 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria- labledby ="myModalLabel" aria-hidden="true"> 希望这对你有用。

我遇到了@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>

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

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

我在我的mvc应用程序中寻找了一个重复的引导参考，在这个问题上的其他有用的答案之后。

终于找到了——它包含在我正在使用的另一个库中，所以一点也不明显!(datatables.net)。

如果您仍然遇到这个问题，请寻找其他可能为您包含引导的库。(datatables.net允许您指定有或没有引导的下载-其他人也这样做)。

所以我从我的包中删除了bootstrap.min.js。配置和所有工作都很好。

我也有同样的问题，但原因不同。我按照文档创建了一个按钮，如下所示:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

当我点击它时，似乎什么也不会发生。但是，该按钮位于<form>中，它暂时只是获取相同的页面。

我通过在button元素中添加type="button"来解决这个问题，这样当点击时它就不会提交表单了。

我也有同样的问题，但对我来说，这是因为我在模式表单中有一个类型为“提交”的按钮。我改变了

    <input  type='submit' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

to

    <input  type='button' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

这就解决了失踪问题。

又是一个原因/解决方案!我在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代码是冗余的，当删除它时，它可以工作。