gpt4 book ai didi

javascript - Bootstrap Modal 在不被查看或关闭的情况下立即消失

转载 作者:行者123 更新时间:2023-11-30 21:14:30 29 4
gpt4 key购买 nike

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

我之前读过其他人的问题,是的,我只将 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>

最佳答案

问题似乎与您包含的外部资源有关。在您的申请中,请务必包含:

  • 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其中我唯一改变的是包括外部资源。

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

关于javascript - Bootstrap Modal 在不被查看或关闭的情况下立即消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45823192/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com