Bootstrap 模态立即消失而不被查看或关闭答案

【问题标题】：Bootstrap Modal Disappearing Immediately Without Being Viewed or ClosedBootstrap 模态立即消失而不被查看或关闭
【发布时间】：2017-08-22 16:53:04
【问题描述】：

就此而言，我对 Modal 和 Javascript 真的很陌生，我想实现这个 Modal，但它只显示四分之一秒，然后在没有被触摸或任何东西的情况下消失。

我之前已经阅读过其他人的相关问题，是的，我只将 bootstrap.min.js 加载到我的索引文件中。我没有 bootstrap-modal.js。

这是我的代码：

<!-- First Item -->
                <div class="item col-md-4 col-sm-6 col-xs-12 mix apps">
                    <a href="#" data-toggle="modal" data-target="#portfolio-item1"> 
                        <img src="http://unsplash.it/680/380?random=4" alt="item" class="img-responsive">
                        <div class="overlay">
                            <div class="content">
                                <h3>Project Name</h3>
                                <p>Description? Category maybe?</p>
                            </div>
                        </div>
                    </a>
                </div>

<!-- Modal-->
        <div id="portfolio-item1" tabindex="-1" role="dialog" class="modal fade">
        <div role="document" class="modal-dialog">
          <div class="modal-content">
            <div data-dismiss="modal" aria-label="Close" class="close-btn"><i class="icon-close"></i></div>
            <div class="container-fluid">
              <div class="row">
                <div class="mockup col-md-8">
                  <div class="device-mockup macbook_2015 portrait gold">
                    <div class="device">
                      <div class="screen"><img src="http://unsplash.it/680/380?random=4" alt="..." class="img-responsive"></div>
                    </div>
                  </div>
                </div>
                <div class="text col-md-4">
                  <h2>Item Name</h2>
                  <p class="lead">Desription.</p><a href="#" class="btn btn-unique">View on Behance</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        </div>
<!-- End Modal-->

非常感谢任何建议！

编辑：这是一个jsfiddle。

编辑：以下是我的外部资源的结构： 头部：

<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/lightbox.min.css">
<link href="css/theme.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
</head>

页脚：

</footer>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/lightbox.min.js"></script>
    <script src="js/plugin.js"></script>
    <script src="js/theme.js"></script>

【问题讨论】：

你添加了 bootstrap.min.css 吗？
有什么方法可以用 sn-p/fiddle 复制这个问题吗？它似乎对我来说非常有效。
我在 @ManzoorSamad 上做过
坚持@Peter，我会搞定的。
将该链接更改为按钮，检查问题是否仍然存在。用 sn-p 复制问题会更好

标签： javascript twitter-bootstrap modal-dialog bootstrap-modal

【解决方案1】：

问题似乎与您包含外部资源有关。在您的应用程序中，您必须包括：

jQuery
引导 JS
引导 CSS

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

您可以使用 CDN 或简单地将文件添加到您的项目并在那里引用它们，但这里有一个 updated jsfiddle，其中我唯一更改的是包括外部资源。

注意：jQuery 应该放在 Bootstrap 的 JS 之前。

【讨论】：

抱歉。我忘了添加我的资源。让我将包含的结构添加到我的帖子中。

【解决方案2】：

我知道出了什么问题。 Bootstrap JS 被调用了两次。我在 plugin.js 中有它，我也有 bootstrap.min.js

感谢大家的帮助！

【讨论】：