twitter-bootstrap 关闭警报不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15245756/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
twitter-bootstrap closing alert does not work
提问by Sam
I can't get it to work. When I click the close button, nothing happens.
我无法让它工作。当我单击关闭按钮时，没有任何反应。
here's the code:
这是代码：
<div class=" alert alert-error alert-block" style="width:200px" >
<button class="close" data-dismiss="alert">×</button>
<span>errors</span>
</div>
I've reproduced the issue on jsfiddler: http://jsfiddle.net/graphicsxp/7L7Nd/
我在 jsfiddler 上重现了这个问题：http: //jsfiddle.net/graphicsxp/7L7Nd/
EDIT
编辑
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "quoteWizard" }))
{
<input type="hidden" id="ModelType" value="CarQuoteRequestViewModel" />
ViewBag.ValidationSummaryClass = ViewData.ModelState.IsValid ? "validation-summary-valid" : "validation-summary-errors";
<div class="@ViewBag.ValidationSummaryClass alert alert-error in fade" data-valmsg-summary="true">
<button class="close" data-dismiss="alert">×</button>
<span>Before you can continue, please make sure you have completed the mandatory fields
highlighted below.</span>
<ul style="display: none" />
</div>
@RenderSection("QuoteSection")
<div class="ui-formwizard-nav">
<input id="back" value="@Resource.Global.Previous" type="reset" class="btn btn-primary" />
<input id="next" value="@Resource.Global.Next" class="btn btn-primary" type="submit" />
</div>
}
采纳答案by Sam
I've sorted it out.
我已经整理好了。
Instead of using a button, I'm now using a span, so the form doesn't get submitted:
我现在不使用按钮，而是使用跨度，因此不会提交表单：
<span class="close" data-dismiss="alert">×</span>
thanks for your help
感谢您的帮助
回答by gertvdijk
It appears that the order in which you include the Javascript sources is important. First load jQuery, thenthe Bootstrap Javascript.
包含 Javascript 源代码的顺序似乎很重要。首先加载 jQuery，然后加载Bootstrap Javascript。
E.g. This fails:
例如这失败了：
<script src="/js/vendor/bootstrap.min.js"></script>
<script src="/js/vendor/jquery-1.9.1.min.js"></script>
and this works:
这有效：
<script src="/js/vendor/jquery-1.9.1.min.js"></script>
<script src="/js/vendor/bootstrap.min.js"></script>
You'll also see this in the example templates. From the Hero template:
您还将在示例模板中看到这一点。从英雄模板：
[...]
<script src="/../assets/js/jquery.js"></script>
<script src="/../assets/js/bootstrap-transition.js"></script>
<script src="/../assets/js/bootstrap-alert.js"></script>
[...]
回答by Juna serbaserbi
Edited from Shail that just changing from alert-error to alert-danger
从 Shail 编辑，刚刚从警报错误更改为警报危险
<div class=" alert alert-danger alert-block" style="width:200px">
<button class="close" data-dismiss="alert">×</button>
<span>
Before you can continuelds
highlighted below.
</span>
</div>
Jsfiddle Demo
Jsfiddle演示
回答by Shail
回答by Jeyhun Rahimov
May be you forget to reference this:
可能你忘了参考这个：
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
I had same problem. I added it, and it worked.
我有同样的问题。我添加了它，它起作用了。
