我正在用bootstrap做一个网站。
基本上，我想在主页中使用一个模态，通过Hero Unit中的按钮来调用。
按钮代码:
<button type="button"
class="btn btn-warning btn-large"
data-toggle="modal"
data-target="#myModal">Open Modal</button>
模态代码:
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">In Costruzione</h3>
</div>
<div class="modal-body">
<p>Test Modal: Bootstrap</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button>
<button class="btn btn-warning">Salva</button>
</div>
</div>
问题是，只要我点击按钮，模态就会淡入，然后立即消失。
我很感激你的帮助。
此外，如何改变下拉三角形的颜色(指向向上，没有悬停)?我正在做一个基于橙色和棕色的网站，那个蓝色的东西真的很烦人。
一个可能的原因
这是用于Modal插件的JavaScript被加载两次的典型行为。请检查，以确保插件没有得到双重加载。根据所使用的平台的不同，模态代码可以从多个源加载。常见的有:
BootStrap . JS(完整的BootStrap JS套件)
Bootstrap.min.js(和上面一样，只是缩小了)
Bootstrap-modal.js(独立插件)
依赖项加载器，例如require('bootstrap')
调试技巧
使用浏览器中的开发人员工具检查已注册的单击事件侦听器是一个很好的开始。例如，Chrome会列出JS源文件，其中可以找到注册监听器的代码。另一种选择是尝试在页面上搜索模态代码中找到的短语，例如var Modal。
不幸的是，这些并不总是能在所有情况下找到东西。检查网络请求可以让您了解页面上加载的所有内容。
一个(破碎的)演示
下面是加载bootstrap.js和bootstrap-modal.js时发生的事情的演示(只是为了确认你的经验):
砰砰作响
如果您向下滚动到该页的源代码底部，您可以删除或注释掉bootstrap-modal.js的<script>行，然后验证现在模式将按预期运行。
如果使用jquery两次附加事件监听器，也会出现这个问题。
例如，你可以在不解除绑定的情况下设置:
$("body").on("click","#fixerror",function(event){
$("#fixerrormodal").modal('toggle')
})
如果发生这种情况，事件将连续触发两次，模态将消失。
$("body").on("click","#fixerror",function(event){
$("#fixerrormodal").modal()
$("#fixerrormodal").modal('toggle')
})
参见示例:http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview
我遇到了@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>
.．.它解决了这个问题。
注意:我还没有足够的声誉来简单地添加评论或点赞，我觉得我可以补充一点澄清。
在我的情况下，我只有一个bootstrap.js, jquery.js文件，但仍然得到这种类型的错误，我的代码按钮是这样的:
<script type="text/javascript">
$(document).ready(function(){
$("#bttn_<?php echo $rnt['id'];?>").click(function(){
$("#myModal_<?php echo $rnt['id'];?>").modal('show');
});
});
</script>
我简单地添加了e.c preventdefault ();对它很有吸引力。
所以，我的新代码如下:
<script type="text/javascript">
$(document).ready(function(){
e.preventDefault();
$("#bttn_<?php echo $rnt['id'];?>").click(function(){
$("#myModal_<?php echo $rnt['id'];?>").modal('show');
});
});
</script>
在我的情况下，我在MVC中使用actionlink按钮，我面临这个问题，我尝试了上面和其他许多解决方案，但仍然面临这个问题，然后我意识到我在代码中的错误。
我在javascript中调用了modal
$('#ModalId').modal('show');
在出现错误之前，我使用了这个按钮
<a href="" onclick="return Edit();" class="btn btn-primary">Edit</a>
我在这个按钮中没有href属性的值，所以我面临这个问题。
然后像这样编辑按钮代码
<a href="#" onclick="return Edit();" class="btn btn-primary">Edit</a>
然后问题得到解决，只是一个错误，因为没有#在第一个。
看看这对你是否有帮助。
以防任何人使用codeigniter 3引导数据表。
下面是我在config/ci_boostrap.php中的修复
//'assets/dist/frontend/lib.min.js',
//lib.min.js has conflict with datatables.js and i removed it replace with jquery.js
'assets/dist/frontend/jquery-3.3.1.min.js',
'assets/dist/frontend/app.min.js',
'assets/dist/datatables.js'
在使用Angular(5)时，我也遇到了同样的问题，但在我的案例中，我是这样解决的:
component.html
<button type="button" class="btn btn-primary" data-target="#myModal"
(click)="showresult()">fff</button>
<div class="modal" id="myModal" role="dialog" tabindex="-1" data-backdrop="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
component.ts
注意:需要在ts文件中导入jquery作为“declare var $:any;”
showresult(){
debugger
$('#myModal').modal('show');
}
我做的改动:
删除"data-toggle="modal"从按钮标签(感谢@miCRoSCoPiC_eaRthLinG这个答案帮助我这里)在我的情况下，它显示模式，所以我创建(点击)="showresult()"
内部组件。ts需要声明Jquery($)和内部按钮点击方法showresult()调用" $('#myModal').modal('show');"
我有同样的问题，因为我切换了我的模式两次，如下所示:
statusCode: {
410: function (request, status, error) { //custom error code
document.getElementById('modalbody').innerHTML = error;
$('#myErrorModal').modal('toggle')
}
},
error: function (request, error) {
document.getElementById('modalbody').innerHTML = error;
$('#myErrorModal').modal('toggle')
}
我删除了一个出现项:
(“# myErrorModal美元)。“充气”(资本)
它像魔法一样起作用!
