我正在用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>
问题是，只要我点击按钮，模态就会淡入，然后立即消失。
我很感激你的帮助。
此外，如何改变下拉三角形的颜色(指向向上，没有悬停)?我正在做一个基于橙色和棕色的网站，那个蓝色的东西真的很烦人。
在使用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');"
在使用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');"
在我的情况下，我只有一个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>
