2013-03-06 18 views
13

Non riesco a farlo funzionare. Quando faccio clic sul pulsante Chiudi, non succede nulla.L'avviso di chiusura di twitter-bootstrap non funziona

Ecco il codice:

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

ho riprodotto il problema sul 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">&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

Si prega di indicare nella domanda che avete questo problema sul vostro sito web, il jsfiddle Lei forniti non ha ancora incluso il jQuery, quindi non supponiamo di sapere miracolosamente che hai jquery piazzato sul tuo sito e il problema è qualcos'altro, vero? – Shail

+0

Avevo un problema simile e avevo bisogno di una versione più recente di jQuery di 1.5, Drupal stava caricando una vecchia versione, quindi ho usato il modulo Drupal jQuery Update. Pensato che questo potrebbe aiutare qualcuno che ha questo problema. – DrCord

+0

hai posizionato l'intervallo al di fuori del pulsante. Dovrebbe essere all'interno secondo i documenti getbootstrap.com. – ahnbizcad

risposta

0

Si prega di inserire libreria jQuery

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

e dovrebbe funzionare

Jsfiddle Demo

+0

sì sì certo! Ma il problema è che l'ho incluso nel mio sito web e ancora non funziona. Funziona comunque con il violino, quindi deve esserci qualcosa di sbagliato altrove. Proverò a postare tutto l'html. – Sam

+0

@ user1098555 non hai incluso il jquery nel jsfiddle così come avrei dovuto sapere. Puoi mostrare la tua pagina di test, per favore ?? – Shail

+0

non si poteva sapere, e neanche io l'avevo notato. Quello che sto dicendo è che mi rendo conto che mancava nel jsfiddle ma nel mio sito web l'ho incluso, quindi il problema deve essere altrove. Tuttavia, ho notato che il motivo per cui non si sta chiudendo è perché sembra che cliccando sul pulsante di chiusura si inneschi invece una convalida del modulo. Dovrò capirlo. Ho aggiornato il mio post originale con tutto l'html (è asp.net mvc) – Sam

21

Sembra che l'ordine in cui si includere le fonti Javascript è importante. Prima carica jQuery, quindi il Bootstrap Javascript.

E.g. Questo fallisce:

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

e questo funziona:

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

Vedrai anche questo di esempio modelli. Dal 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

Mi chiedo perché l'ordine conta ... Grazie – havin

0

Può essere che si dimentica di fare riferimento a questo:

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

ho avuto lo stesso problema. L'ho aggiunto e ha funzionato.

1

A cura da Shail che proprio passaggio da avviso di errori per avvisare-pericolo

<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

Questo non fornisce una risposta alla domanda. Per criticare o richiedere chiarimenti da un autore, lascia un commento sotto il loro post - puoi sempre commentare i tuoi post, e una volta che hai [reputazione] sufficiente (http://stackoverflow.com/help/whats-reputation) essere in grado di [commentare qualsiasi post] (http://stackoverflow.com/help/privileges/comment). – cpburnz

+0

ok @cpburnz, mi dispiace, ero newbie, non sapevo ancora di quali regole prima, e voglio solo aiutare e io non sono uno spammer, giuro. Ho provato il codice di shail nel mio vero programma e non ha funzionato se ho messo l'allarme ** all'erta **, quindi ho cambiato l'allerta diventare ** alert-danger **, e ha funzionato bene, tutto qui. Voglio solo aiutare e basta, e non sono uno spammer. Ok, cosa dovrei fare ora per correggere la mia colpa? sarò punito? Va bene, ho accettato con un cuore felice, davvero. –

Problemi correlati