Question

我对Modals和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

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

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

Answer 1

似乎问题与您包含外部资源有关。在您的申请中，您必须包括：

的jQuery
Bootstrap JS
Bootstrap 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，其中我改变的唯一内容是包括外部资源。

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

Answer 2

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

谢谢大家的帮助！

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

2 个答案: