Twitter Bootstrap关闭警告框无效。

Question

我无法让它工作。当我点击关闭按钮时，没有任何反应。

以下是代码：

 <div class=" alert alert-error alert-block" style="width:200px" >
    <button class="close" data-dismiss="alert">&times;</button>
        <span>errors</span>            
    </div>

我已在jsfiddler上重现了这个问题：http://jsfiddle.net/graphicsxp/7L7Nd/ 编辑

@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">&times;</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>
}

- Sam

---

请在您的问题中提到您的网站遇到了这个问题，您提供的 jsfiddle 没有包含 jQuery，所以我们不可能神奇地知道您在网站上放置了 jQuery，而问题实际上是其他方面引起的，对吧？ - Shail

我曾经遇到过类似的问题，需要使用比1.5更新的jQuery版本，但是Drupal加载的是旧版本，所以我使用了Drupal jQuery更新模块。希望这能帮助到遇到同样问题的人。 - DrCord

你把 span 放在了按钮外面。根据 getbootstrap.com 的文档，它应该放在里面。 - ahnbizcad

Answer 1

似乎JavaScript资源文件的加载顺序很重要。首先加载jQuery，然后再加载Bootstrap JavaScript。

例如，这样做会失败：

<script src="/js/vendor/bootstrap.min.js"></script>
<script src="/js/vendor/jquery-1.9.1.min.js"></script>

这个有效：

<script src="/js/vendor/jquery-1.9.1.min.js"></script>
<script src="/js/vendor/bootstrap.min.js"></script>

你还可以在示例模板中看到这一点。来自Hero 模板：

[...]
<script src="/../assets/js/jquery.js"></script>
<script src="/../assets/js/bootstrap-transition.js"></script>
<script src="/../assets/js/bootstrap-alert.js"></script>
[...]

- gertvdijk

---

不知道为什么顺序很重要..谢谢 - havin

Answer 2

我已经解决了。

现在我使用的是 span 而不是按钮，这样表单就不会被提交：

        <span class="close" data-dismiss="alert">&times;</span>

感谢您的帮助。

- Sam

---

原始的Bootstrap使用<a>标签。将其更改为<span>就像您所说的那样有效。不错的解决方法。 - echology

Answer 3

从Shail编辑，只是将alert-error更改为alert-danger

<div class=" alert alert-danger alert-block" style="width:200px">
     <button class="close" data-dismiss="alert">&times;</button>
     <span>
             Before you can continuelds
             highlighted below.
     </span>
</div>

Jsfiddle 演示

（保留原文中的html标签）

- Juna serbaserbi

---

这并没有提供问题的答案。如果要批评或请求作者澄清，请在他们的帖子下留言 - 您始终可以在自己的帖子上发表评论，并且一旦您拥有足够的声望，您将能够评论任何帖子。 - Uyghur Lives Matter

好的@cpburnz，我很抱歉，我是新手，之前不知道这些规则，我只是想帮忙，我不是垃圾邮件发送者，发誓。我在我的真实程序中尝试了shail的代码，如果我放置alert-error，它就无法工作，所以我将所有警报更改为alert-danger，然后它顺利地工作了，就这样。我只是想帮忙，我不是垃圾邮件发送者。好的，现在我该怎么做来纠正我的错误？我会受到惩罚吗？没关系，我接受了，真心的。 - Juna serbaserbi

Answer 4

可能你忘记引用了这个：

<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>

我曾经遇到同样的问题。我添加了它，然后它就起作用了。

- Jeyhun Rahimov

Answer 5

请添加jQuery库。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

它应该可以工作

Jsfiddle 演示

- Shail

---

哈，是的，当然！但问题是我已经把它包含在我的网站中，但它仍然不起作用。在fiddle上它是可以工作的，所以肯定是其他地方出了问题。我会尝试发布所有的HTML代码。 - Sam

@user1098555，你在jsfiddle中没有包含jQuery，所以我怎么知道呢？你能展示一下你的测试页面吗？谢谢！ - Shail

你可能不知道，我之前也没有注意到。我的意思是，我意识到在 jsfiddle 中缺少了一些东西，但在我的网站中已经包含了它，所以问题必须出在其他地方。然而，我现在注意到它没有关闭的原因是因为似乎点击关闭按钮会触发表单验证。我需要弄清楚这个问题。我已经更新了我的原始帖子，并附上了所有的 HTML 代码（它是 asp.net mvc）。 - Sam