2013-03-06 139 views
13

我無法讓它工作。當我點擊關閉按鈕時,沒有任何反應。twitter-bootstrap關閉警報不起作用

下面的代碼:

<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> 
} 
+0

請註明你的問題,你的網站上有這個問題,您提供didnt的的jsfiddle包括jQuery,所以我們不會奇蹟般地知道你有jquery放置在你的網站上,這個問題是別的,不是嗎? – Shail 2013-03-06 11:52:17

+0

我有一個類似的問題,需要比1.5更新版本的jQuery,drupal加載了舊版本,所以我使用了Drupal jQuery更新模塊。認爲這可能會幫助有這個問題的人。 – DrCord 2013-11-04 18:42:13

+0

您將按鈕之外的跨度。它應該在getbootstrap.com文檔中。 – ahnbizcad 2015-02-24 06:06:07

回答

0

請包括jQuery庫

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

,它應該工作

的jsfiddle Demo

+0

哈哈當然是!但問題是我已經將它包含在我的網站中,但它仍然不起作用。它雖然在小提琴中奏效,所以其他地方一定有些問題。我會盡量發佈所有的HTML。 – Sam 2013-03-06 11:43:14

+0

@ user1098555你沒有在jsfiddle中包含jquery,所以我應該怎麼知道。你能顯示你的測試頁面嗎? – Shail 2013-03-06 11:45:46

+0

你不知道,我也沒有注意到它。我說的是,我意識到它在jsfiddle中丟失了,但在我的網站中我已經包含了它,所以問題必須在其他地方。但是我現在已經注意到它沒有關閉的原因是因爲看起來單擊關閉​​按鈕會觸發表單驗證。我必須弄清楚。我已經更新了所有html的原始文章(它是asp.net mvc) – Sam 2013-03-06 12:03:38

21

看來,順序您包括Javascript源是很重要的。首先加載jQuery,,然後 Bootstrap Javascript。

E.g.這失敗

<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 template

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

想知道爲什麼順序很重要..謝謝 – havin 2017-01-03 09:29:09

0

可能是你忘了引用此:

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

我有同樣的問題。我添加了它,它工作。

1

從Shail編輯從警報錯誤只是改變以警告,危險

<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 Demo

+0

這不會提供問題的答案。要批評或要求作者澄清,在他們的帖子下留下評論 - 你總是可以評論你自己的帖子,一旦你有足夠的[聲譽](http://stackoverflow.com/help/whats-reputation),你會能夠[評論任何帖子](http://stackoverflow.com/help/privileges/comment)。 – cpburnz 2015-07-17 17:25:54

+0

好@cpburnz,我很抱歉,我是新手,我還不知道那些規則,我只是想幫忙,我不是垃圾郵件發送者,發誓。我在我的真實程序中嘗試了shail的代碼,如果我發佈** alert-error **,那麼它就不起作用,所以我將allert變成了** alert-danger **,並且它運行得很順利,就這些。我只是想幫助這一切,而我不是垃圾郵件發送者。好的,我現在應該怎麼做才能解決我的錯誤?我會受到懲罰?沒關係,我真誠地接受了一顆快樂的心。 – 2015-07-23 20:33:12